Logo
hummingbird

Svelte

Initialization

This example demonstrates how to initialize the Hummingbird UI library in a SvelteKit project. The afterNavigate lifecycle hook from $app/navigation ensures that the library is loaded on the client after each route navigation.

This setup is typically used in +layout.svelte, which wraps all routes in your app. The CSS file (app.css) should include Hummingbird’s base styles.

<!-- +layout.svelte -->
<script>
  import { afterNavigate } from "$app/navigation";
  let { children } = $props();
  import "../app.css";

  afterNavigate(() => {
    import('@hummingbirdui/hummingbird')
  })
</script>
{@render children()}
Optimize

To reduce bundle size and improve performance, you can selectively import only the Hummingbird components you need. Instead of importing the entire library, use specific paths to load individual modules like modal, dropdown, etc.

This example shows how to import only the modal script. Other components are commented out and can be enabled as needed.

<!-- +layout.svelte -->
<script>
  import { afterNavigate } from "$app/navigation";
  let { children } = $props();
  import "../app.css";

  afterNavigate(() => {
    // import('@hummingbirdui/hummingbird/lib/esm/scripts/alert');
    // import('@hummingbirdui/hummingbird/lib/esm/scripts/button');
    // import('@hummingbirdui/hummingbird/lib/esm/scripts/carousel');
    // import('@hummingbirdui/hummingbird/lib/esm/scripts/collapse');
    // import('@hummingbirdui/hummingbird/lib/esm/scripts/dropdown');
    import('@hummingbirdui/hummingbird/lib/esm/scripts/modal');
    // import('@hummingbirdui/hummingbird/lib/esm/scripts/offcanvas');
    // import('@hummingbirdui/hummingbird/lib/esm/scripts/popover');
    // import('@hummingbirdui/hummingbird/lib/esm/scripts/scrollspy');
    // import('@hummingbirdui/hummingbird/lib/esm/scripts/tab');
    // import('@hummingbirdui/hummingbird/lib/esm/scripts/toast');
    // import('@hummingbirdui/hummingbird/lib/esm/scripts/tooltip');
  })
</script>
{@render children()}
JavaScript API

This section demonstrates how to interact with Hummingbird UI components using their JavaScript API inside a Svelte component. Here, a Modal instance is created using a DOM selector, and a button click toggles its visibility.

You can use this approach to control any Hummingbird component dynamically, such as opening, closing, or updating modal content programmatically.

<script>
  import { afterNavigate } from "$app/navigation";

  afterNavigate(async () => {
    const { Modal } = await import('@hummingbirdui/hummingbird');
    const openBtn = document.querySelector('[data-open-demo-modal]')
    const myModal = new Modal('.modal')
    openBtn?.addEventListener("click", () => {
      myModal.toggle()
    })
  })

</script>

<button class='btn btn-primary' data-open-demo-modal>Primary</button>
<div class="modal">...</div>