Introduction

Hummingbird is an extensive, open-source library of UI components built as the most sensible component system 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 any project to life with interactive, accessible components. Start building today by following the quickstart guide.

Installation

1. Install Tailwind CSS

Ensure the project is set up with Tailwind CSS. If Tailwind CSS isn’t set up yet, follow the official installation guide.

2. Install Hummingbird

Install Hummingbird via a preferred package manager:

npm install @hummingbirdui/hummingbird

3. Import CSS

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

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

4. Initialize JS plugins

Include Hummingbird javascript at the end of the HTML body.

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

Alternatively, if using a build system (like Vite or Webpack), import Hummingbird directly in the JavaScript entry file.

import '@hummingbirdui/hummingbird';

Another quickest way to include Hummingbird script in a project is via CDN link.

<script src="https://cdn.jsdelivr.net/npm/@hummingbirdui/hummingbird@0.0.0-insiders.3.0/dist/hummingbird.bundle.min.js"></script>

Optimization: To reduce the final bundle size, only the specific JavaScript plugins needed can be imported. Follow the optimization approach in the JavaScript section.

Dependencies: Some components require Popper for positioning. See the dependencies section for more details.

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, the 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>

const openBtn = document.querySelector("[data-open-demo-modal]");
const myModal = new window.hummingbird.Modal(".modal");

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

When using a build system such as Vite or Webpack, import Modal as shown below:

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 using TypeScript, Hummingbird plugins can be imported 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 a 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 the environment doesn’t support ESM, bundlers and Node will fall back to this file.

No manual choice is required; the bundler or runtime will select the correct version based on the setup.