Hummingbird React

React components for Hummingbird, built with Tailwind CSS.

---

Table of contents

• Documentation
• Getting Started
• Quick start
• Installation
  • Install Tailwind CSS
  • Install Hummingbird React
  • Import CSS
  • Use components
• TypeScript Support
• License
• Contribution guidelines
• Meet the Team
• Contributors

Documentation

Comprehensive documentation is available at react.hbui.dev.

Getting started

Hummingbird React is the official React component library for the Hummingbird design system. It provides a large set of accessible, fully styled React components such as buttons, forms, dialogs, and dropdowns, along with patterns suitable for dashboards, SaaS applications, and e-commerce systems.

Quick start

Create a new Next.js, Vite, Astro, React Router or Gatsby project with Tailwind CSS, Hummingbird React and dark mode already set up:

npx create-hummingbird-react-app@latest

pnpm, yarn and bun work too: pnpm create hummingbird-react-app. See the CLI docs for templates and options. To add Hummingbird React to an existing project, follow the steps below.

Installation

Using a framework? The framework guides cover Next.js, Vite, Astro, React Router, and Gatsby step by step, including dark mode setup.

1. Install Tailwind CSS

Ensure the project is set up with Tailwind CSS. If Tailwind CSS hasn't been set up yet, follow the official installation guide.

2. Install Hummingbird React

Install Hummingbird React via a preferred package manager:

# Using pnpm
pnpm add @hummingbirdui/react

# 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).

@import "tailwindcss";
@import "@hummingbirdui/react";

4. Use components

Import any component and use it in your application.

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

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

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 modifying the project scaffolder, work in packages/create-hummingbird-react-app/.
   • 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: