Astro

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

Installation

1. Install Tailwind CSS

Follow the official installation guide to install Tailwind CSS in an Astro 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., global.css).

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

Then include the CSS file to the main layout file (e.g., src/layouts/Layout.astro).

---
import "../global.css";
---

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width" />
    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
    <meta name="generator" content={Astro.generator} />
    <title>Astro Basics</title>
  </head>
  <body>
    <slot />
  </body>
</html>

4. Initialize JS plugins

Add the Hummingbird JS bundle before the closing </body> tag in the main layout file (e.g., src/layouts/Layout.astro).

---
import "../global.css";
---

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width" />
    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
    <meta name="generator" content={Astro.generator} />
    <title>Astro Basics</title>
  </head>
  <body>
    <slot />

    <script src="../../node_modules/@hummingbirdui/hummingbird/dist/hummingbird.bundle.min.js"></script>
  </body>
</html>

Alternatively, Hummingbird can be imported inside a JavaScript file.

import '@hummingbirdui/hummingbird';

Optimization

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

<script>
  // 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>

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:

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

<script>
  import { Modal } from "@hummingbirdui/hummingbird";
  const openBtn = document.querySelector("[data-open-demo-modal]");
  const myModal = new Modal(".modal");

  openBtn.addEventListener("click", () => {
    myModal.show();
  });
</script>