Installation

Getting started

Hummingbird is a fast, lightweight UI library built on top of Tailwind CSS utility classes. Write cleaner HTML, customize with utilities, and bring your project to life with interactive, accessible components. Start building today by following the quickstart guide.

Installation

1. Install Tailwind CSS

Ensure you have a project set up with Tailwind CSS. If you haven’t set up Tailwind CSS yet, follow the official installation guide.

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., styles.css).

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

4. Initialize JS plugins

Include Hummingbird JavaScript at the end of your HTML body.

<script src="../path/to/@hummingbirdui/hummingbird/dist/hummingbird.bundle.min.js"></script>

Alternatively, You can import Hummingbird in your JavaScript entry file.

import '@hummingbirdui/hummingbird';

Optimization: To reduce the final bundle size, you can import only the specific JavaScript plugins you need. Follow the optimization approach in the JavaScript section.

Learn more about Hummingbird’s JavaScript components in the JavaScript section.

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>

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

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

TypeScript Support

Hummingbird includes TypeScript definitions for all components. If you’re using TypeScript, you can import Hummingbird plugins with their types.

import { Modal } from "@hummingbirdui/hummingbird";
import { type ModalClass, type ModalInstance, type ModalOptions } from "@hummingbirdui/hummingbird";

ESM vs CJS

Hummingbird supports both ESM and CJS builds so it works with different environments:

• ESM Used by modern bundlers like Vite, Rollup, and Webpack 5+. If your project is using ES modules (import syntax), this is what gets loaded automatically.

• CJS Used in Node.js or older tooling that relies on require(). If your environment doesn’t support ESM, bundlers and Node will fall back to this file.

You don’t need to choose manually, your bundler or runtime will pick the right version based on your setup.