Logo
hummingbird

Astro

This guide explains how to set up Hummingbird with Astro using Tailwind CSS. It covers project setup, configuration, and usage so you can quickly build and style components in your Astro app.

Installation

1. Install Tailwind CSS

Follow the official installation guide to install Tailwind CSS in your Astro project.

2. Install Hummingbird

Install Hummingbird via your preferred package manager:

npm install @hummingbirdui/hummingbird

3. Import CSS

Import Hummingbird styles in your 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 your 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, You can import Hummingbird inside JavaScript file.

import '@hummingbirdui/hummingbird';

Optimization

reduce the final bundle size, you can import only the specific JavaScript plugins you need. The below example demonstrates how to import 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, you can toggle an modal 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>