Changelog

Gatsby

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

Quick start

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

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

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 Gatsby project with gatsby-plugin-postcss.

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/styles/global.css

Then import the CSS file in gatsby-browser.js.

import "./src/styles/global.css";

gatsby-browser.js

4. Use components

Import any component and use it in a page.

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

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

src/pages/index.js

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/styles/global.css

2. Set the initial theme

Add ThemeModeScript to the document <head> in gatsby-ssr.js. It applies the saved theme before the page renders, so there is no flash of the wrong theme.

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

export const onRenderBody = ({ setHeadComponents }) => {
  setHeadComponents([<ThemeModeScript key="theme-mode-script" />]);
};

gatsby-ssr.js

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.js

Next steps

Previous

Svelte

Next

Astro