CLI

Copy Harmo's components into your project, with their styles, and make them yours. The files are yours to change, and only React is left to depend on. They need React 19.3 or later and TypeScript.

Use

From your project's root:

bunx harmo-ui add tabs

npx harmo-ui add tabs

pnpm dlx harmo-ui add tabs

yarn dlx harmo-ui add tabs

That copies Tabs, its styles, and whatever it needs:

src/components/harmo/
  harmo.css
  tokens.css
  accents.css
  tabs/Tabs.tsx
  tabs/TabNav.tsx
  tabs/useTabsMotion.ts
  tabs/tabs.css
  provider/HarmoProvider.tsx
  lib/children.ts
  lib/withClass.ts

Import harmo.css once, in your root layout or entry file. It lists the tokens, the accents, and each component's styles, and npx harmo-ui add keeps it up to date. Then use the component:

page.tsx

import "@/components/harmo/harmo.css";
import { Tabs, TabList, Tab, TabPanel } from "@/components/harmo/tabs/Tabs";

@/ is the path alias a default Next.js project sets up. Without one, use a relative path.

Commands

Command	Effect
`npx harmo-ui add <component...>`	Copies components, with their styles and what they need
`npx harmo-ui add --all`	Copies every component
`npx harmo-ui list`	Lists the components
`npx harmo-ui theme <color>`	Writes `harmo-theme.css`: your brand color, as a hex code, in every role, in light and dark mode

Options

These are for add and theme.

Option	Effect
`-p`, `--path <folder>`	Where to write. By default `components/harmo`, or `src/components/harmo` if the project has a `src` folder. Pass it each time you use another folder
`-o`, `--overwrite`	Replaces files that differ from Harmo's, without asking
`--dry-run`	Shows what would change, and changes nothing

Your brand color

bunx harmo-ui theme "#0f75b6"

npx harmo-ui theme "#0f75b6"

pnpm dlx harmo-ui theme "#0f75b6"

yarn dlx harmo-ui theme "#0f75b6"

That writes harmo-theme.css next to harmo.css, and adds it there: your color in every role, in light and dark mode, adapted from the nearest of Harmo's accents at the same contrast, so text and buttons pass WCAG AA. A color too light for white text, such as a bright yellow, is darkened for text and buttons, and the file says so. Change any line you like; running it again asks before replacing a file you've changed.

Updates

Copied files don't update on their own, so they don't get Harmo's fixes either. To take a newer version, run npx harmo-ui@latest add <component>. It never replaces a file you've changed without asking, and files it can't ask about stay as they are.

Choose one way for a project: copied components and installed ones each have their own HarmoProvider, so a project using both needs to wrap its app in both.