harmo-ui
Copy the components of Harmo, a CSS-first UI library for dashboards and applications, into your project, with their styles, and make them yours.
Use
From your project's root:
npx harmo-ui add tabs
That copies Tabs, its styles, and whatever it needs:
src/components/harmo/
harmo.css
tokens.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 and
each component's styles, and npx harmo-ui add keeps it up to date. Then use the
component:
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.
The files are yours to change, and only React is left to depend on. They need React 19.3 or later and TypeScript.
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 |
Option for add | Effect |
|---|---|
-p, --path <folder> | Where to copy them. 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 |
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.
For updates through your package manager instead, install the packages:
bun add @harmo-ui/css @harmo-ui/react
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.
Learn more
- Components: each one's props, under its React section
- Theming: change the copied
tokens.css, or override its custom properties
Harmo is at 0.x, so its APIs may still change between releases.