Changelog

React Router

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


This guide covers React Router in framework mode. For a single-page app that uses React Router as a library, follow the React guide instead.

Quick start

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

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

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

Installation

1. Install Tailwind CSS

Projects created with create-react-router include Tailwind CSS by default. Otherwise, follow the official installation guide to install it.

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";

app/app.css

4. Use components

Import any component and use it in a route.

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

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

app/routes/home.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);

app/app.css

2. Set the initial theme

Render ThemeModeScript in the <head> of the Layout export, after <Links />. It applies the saved theme before the page renders, so there is no flash of the wrong theme. Add suppressHydrationWarning to <html>, because the script updates it before React hydrates.

import { ThemeModeScript } from "@hummingbirdui/react";
import { Links, Meta, Scripts, ScrollRestoration } from "react-router";

export function Layout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en" suppressHydrationWarning>
      <head>
        <meta charSet="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <Meta />
        <Links />
        <ThemeModeScript />
      </head>
      <body>
        {children}
        <ScrollRestoration />
        <Scripts />
      </body>
    </html>
  );
}

app/root.tsx

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 />;
}

app/components/Navbar.tsx

Next steps

Previous

React

Next

Next