Svelte

This guide explains how to set up Hummingbird with Svelte and SvelteKit using Tailwind CSS. It covers project setup, configuration, and usage for quickly building and styling components in a Svelte app.

Installation

1. Install Tailwind CSS

Follow the official installation guide to install Tailwind CSS in a Svelte project.

2. Install Hummingbird

Install Hummingbird via preferred package manager:

npm install @hummingbirdui/hummingbird

3. Import CSS

Import Hummingbird styles in the main CSS file (e.g., app.css).

@import "tailwindcss";
@import "@hummingbirdui/hummingbird";

4. Initialize JS plugins

Import Hummingbird inside afterNavigate in the root +layout.svelte. The afterNavigate lifecycle hook ensures that the scripts load after each route navigation.

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

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

Optimization

To reduce the final bundle size, import only the specific JavaScript plugins required. The example below demonstrates importing only the modal script.

<!-- +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

Hummingbird also provides a JavaScript API for programmatic control of components. For example, a modal can be toggled manually using the API.

Here’s how to initialize and use the Modal component:

<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>Open</button>
<div class="modal">...</div>