Installation

Install Hummingbird React and set it up in your project.

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.

pnpm add @hummingbirdui/react

3. Import CSS

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

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

4. Use components

Import any component and use it in the application.

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

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

TypeScript support

Hummingbird React is written in TypeScript and includes type definitions for all components. Component props are fully typed and available on each component's namespace, so no additional @types packages are needed.

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

type SubmitButtonProps = Button.Props;
type CardHeaderProps = Card.HeaderProps;

Customization

All components accept a className prop. Custom classes are merged with the component classes, so Tailwind utility classes can be used to adjust any component.

<Button variant="outline" className="w-full">
  Full width button
</Button>

For theme-level changes such as colors and spacing, Hummingbird provides global and component-specific CSS variables. See the Customize section for details.