Next.js

This guide explains how to set up Hummingbird React in a Next.js project, including dark mode support.

Installation

1. Install Tailwind CSS

Create a Next.js project and set it 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. The package registers its own Tailwind @source paths, so no additional configuration is needed.

app/globals.css

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

4. Use components

Import any component and use it in the application. All components work in React Server Components; interactive ones are marked "use client" internally.

app/page.tsx

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

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

Dark mode

Hummingbird uses class-based dark mode - a .dark class on <html> switches the whole theme. See Dark Mode for details and customization.

1. Add the dark variant

app/globals.css

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

2. Set the initial theme

Render ThemeModeScript inside <head> so the saved theme is applied before first paint - no flash of the wrong theme. It is safe in React Server Components. Add suppressHydrationWarning to <html> since the script updates it before React hydrates.

app/layout.tsx

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

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

3. Add a theme toggle

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

components/Navbar.tsx

"use client";

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

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

PreviousFramework Guides NextVite