CLI

Create a new project with Hummingbird React, Tailwind CSS and dark mode already set up, using create-hummingbird-react-app.

Create a project

create-hummingbird-react-app scaffolds a new project with Hummingbird React already configured. Run it with a preferred package manager.

pnpm create hummingbird-react-app

The CLI asks a few questions:

  1. Where to create the project. The default is my-hummingbird-app.
  2. Which framework to use. Next.js is preselected.
  3. Whether to install dependencies. It uses the package manager that ran the command.
  4. Whether to initialize a git repository. This is skipped inside an existing repository.

Then start the development server and open the URL it prints.

pnpm run dev

Templates

Every template is written in TypeScript and follows the matching framework guide.

TemplateFrameworkEdit firstDev server
nextjs

Next.js (App Router)

app/page.tsxlocalhost:3000
viteVitesrc/App.tsxlocalhost:5173
astroAstrosrc/pages/index.astrolocalhost:4321
react-router

React Router

(framework mode)

app/routes/home.tsxlocalhost:5173
gatsbyGatsbysrc/pages/index.tsxlocalhost:8000

Each template shows a welcome page built with Button and DarkThemeToggle. Edit the file listed above to start building.

What's included

All templates share the same setup:

  • Tailwind CSS v4 with the framework's official integration: the Vite plugin for Vite, Astro and React Router, and PostCSS for Next.js and Gatsby.
  • Hummingbird React styles imported in the CSS entry. No Tailwind config is needed, because the package registers its own @source paths.
  • Class-based dark mode. The saved theme is applied before first paint, so there is no flash of the wrong theme.
@import "tailwindcss";
@import "@hummingbirdui/react";

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

The CSS entry and the initial theme script live in a different place in each framework.

TemplateCSS entryInitial theme
Next.jsapp/globals.css

ThemeModeScript in app/layout.tsx

Vitesrc/index.css

Inline script in index.html

Astrosrc/styles/global.css

Inline script in src/layouts/Layout.astro

React Routerapp/app.css

ThemeModeScript in app/root.tsx

Gatsbysrc/styles/global.css

ThemeModeScript in gatsby-ssr.tsx


To switch themes or customize colors, see Theming. To change how dark mode works, see Dark Mode.

Options

Pass a directory and options to skip the matching prompts.

OptionDescription
[directory]

Where to create the project. Use . for the current directory. The package name is derived from it.

-t, --template <id>

One of nextjs, vite, astro, react-router or gatsby.

--pm <name>

Package manager for installing: npm, pnpm, yarn or bun. Defaults to the one that ran the command.

--install / --no-install

Install dependencies, or skip it. Asked by default.

--git / --no-git

Initialize a git repository with an initial commit, or skip it. Asked by default, and not offered inside an existing repository.

--overwrite

Empty a non-empty target directory without asking. .git is kept.

-y, --yesSkip all prompts and use the defaults.
-h, --helpShow usage.
-v, --versionShow the CLI version.

pnpm create hummingbird-react-app my-app --template vite

Non-interactive use

Pass --yes to run without prompts, for example in CI or scripts. Without other options it creates my-hummingbird-app from the nextjs template, installs dependencies, and initializes git. A non-empty target directory is an error unless --overwrite is passed.

pnpm create hummingbird-react-app my-app --template astro --no-git --yes

Requirements

The CLI needs Node.js 20.19 or later. Some frameworks need a newer version, and the CLI warns when the running version is outside the template's range.

  • Astro needs Node.js 22.23.4 or later.
  • React Router needs Node.js 22.22 or later.
  • Gatsby supports Node.js versions below 26.

Adding to an existing project

The CLI only creates new projects. To add Hummingbird React to an existing app, follow the installation guide or the framework guide for the framework in use.

PreviousInstallationNextFramework Guides