Changelog

Next

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

Quick start

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

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

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 Next.js project. Projects created with create-next-app include it by default.

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/globals.css

4. Use components

Import any component and use it in the application. All components work in React Server Components. Interactive components are client components internally, so there is no need to add "use client" to use them.

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

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

app/page.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/globals.css

2. Set the initial theme

Render ThemeModeScript inside <head>. 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 "./globals.css";

export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  return (
    <html lang="en" suppressHydrationWarning>
      <head>
        <ThemeModeScript />
      </head>
      <body>{children}</body>
    </html>
  );
}

app/layout.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.

"use client";

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

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

components/Navbar.tsx

Next steps

Previous

React Router

Next

Laravel