Changelog

React

This guide explains how to set up Hummingbird in a React project with Hummingbird React, the official React component library. It covers a Vite project with Tailwind CSS setup, components and dark mode.


Using React Router in framework mode? Follow the React Router guide instead.

Quick start

Create a new React (Vite) project with Hummingbird React, Tailwind CSS and dark mode already set up:

npx create-hummingbird-react-app@latest my-app --template vite

To add Hummingbird React to an existing project, follow the steps below.

Installation

1. Install Tailwind CSS

Follow the official installation guide to install Tailwind CSS in a Vite project.

2. Install Hummingbird React

Install Hummingbird React via preferred package manager:

npm install @hummingbirdui/react

3. Import CSS

Import Tailwind CSS and Hummingbird React in the main CSS file. No Tailwind configuration is needed, because the package registers its own source paths.

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

src/index.css

4. Use components

Import any component and use it in the application.

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

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

src/App.tsx

Dark mode

1. Add the dark variant

Hummingbird uses class-based dark mode: a dark class on <html> switches the theme. Register the variant after the style imports.

@custom-variant dark (&:where(.dark, .dark *), .dark);

src/index.css

2. Set the initial theme

Add this script to the <head> of index.html. It applies the saved theme before the page renders, so there is no flash of the wrong theme.

<head>
  <!-- ... -->
  <script>
    const theme = localStorage.getItem("theme");
    document.documentElement.classList.toggle(
      "dark",
      theme === "dark" ||
        (theme !== "light" &&
          window.matchMedia("(prefers-color-scheme: dark)").matches),
    );
  </script>
</head>

index.html

3. Add a theme toggle

DarkThemeToggle switches between light and dark mode, saves the choice and keeps browser tabs in sync. For a custom control, use the useThemeMode hook.

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

export function Navbar() {
  return <DarkThemeToggle />;
}

src/components/Navbar.tsx

Next steps

Previous

Framework Guides

Next

React Router