Modern, accessible, and customizable React components built with Radix UI and Tailwind CSS.

Table of contents

• Documentation
• Getting Started
• Installation
  • Install Tailwind CSS
  • Install Hummingbird React
  • Import CSS
  • Use components
• Per-component imports
• TypeScript Support
• License
• Contribution guidelines
• Meet the Team
• Contributors

Documentation

Comprehensive documentation is available at react.hbui.dev.

Getting started

Hummingbird React brings the Hummingbird component system to React. Components are styled by Hummingbird CSS and powered by Radix UI primitives for behavior and accessibility. You can:

• Use fully styled, accessible components out of the box
• Import individual components from their own subpaths to keep bundles small
• Customize any component with Tailwind utility classes via className

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 React

Install Hummingbird React via your preferred package manager. The @hummingbirdui/hummingbird package provides the styles and is required as a peer dependency.

# Using npm
npm install @hummingbirdui/react

# Using yarn
yarn add @hummingbirdui/react

3. Import CSS

Import Hummingbird styles in your main CSS file (e.g., globals.css), and register the package as a source so the Tailwind compiler scans it for class names.

@import "tailwindcss";
@import "@hummingbirdui/hummingbird";
@source "../node_modules/@hummingbirdui/react";

The @source directive is required because Tailwind does not scan node_modules by default. Since Hummingbird generates component classes on demand, Tailwind must scan the @hummingbirdui/react package. Update the relative path so it points to node_modules from your CSS file.

No per-component CSS imports or manual purge configuration are needed.

4. Use components

Import any component and use it in your application.

import { Button } from "@hummingbirdui/react";

export default function App() {
  return (
    <Button variant="filled" color="primary">
      Click me
    </Button>
  );
}

Per-component imports

Every component is also available from its own subpath. This keeps the bundle small because only the imported components are included.

import { Button } from "@hummingbirdui/react/button";
import { Alert, AlertIcon } from "@hummingbirdui/react/alert";

The cn utility for merging class names is available from the utils subpath.

import { cn } from "@hummingbirdui/react/utils";

TypeScript support

Hummingbird React is written in TypeScript and includes type definitions for all components. Component props are fully typed, so no additional @types packages are needed.

import { Button, type ButtonProps } from "@hummingbirdui/react/button";

License

This project is licensed under the MIT License.

Contribution guidelines

To contribute code:

1. Fork the repository to your own GitHub account.

2. Clone your fork locally:

   git clone https://github.com/your-username/hummingbird-react.git
   cd hummingbird-react

3. Install dependencies:

   pnpm install

4. Start the development server: This will start the documentation site locally, allowing you to see changes in real-time.

   pnpm dev

   The site will typically be available at http://localhost:3000 (or another port if 3000 is busy).

5. Create a new branch for your feature or bug fix:

   git checkout -b feature-or-bugfix-name

6. Make your changes:

   • If modifying the library, work in packages/hummingbird-react/src/.
   • If updating documentation, work in apps/docs/.

7. Build the project (optional but recommended before committing): To ensure everything builds correctly:

   pnpm build

8. Commit your changes:

   git commit -m "Your descriptive commit message"

9. Push your changes to your fork:

   git push origin feature-or-bugfix-name

10. Open a pull request against the main branch.

Meet the team

Meet the core team behind Hummingbird:

Contributors

Thanks goes to these amazing people: