Introduction

Hummingbird is an extensive, open-source library of UI components built as the most sensible UI library for Tailwind CSS. It is designed to provide a definitive toolset for rapid development, featuring a massive collection of variants, plug-and-play integration, and a performance-first architecture. The library includes all essential components required for modern web development, such as buttons, forms, and modals, alongside complex layouts and a clean codebase designed for data-rich dashboards, SaaS applications, and e-commerce platforms.

All elements are meticulously crafted with Tailwind CSS utility classes and are designed to be fully extensible. The library is framework-agnostic, with guides and wrappers to ensure seamless integration into any modern development stack.

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.