Installation

Install

@harmo-ui/react needs React 19.3 or later.

bun add @harmo-ui/css @harmo-ui/react

npm install @harmo-ui/css @harmo-ui/react

pnpm add @harmo-ui/css @harmo-ui/react

yarn add @harmo-ui/css @harmo-ui/react

Use it

Load the CSS once, then use the components:

import "@harmo-ui/css";
import { Button, Field, Input, Link } from "@harmo-ui/react";

<Button type="submit">Save changes</Button>
<Button variant="secondary">Cancel</Button>

<Link href="/reports">View reports</Link>

<Field label="Email address" description="We'll send your receipt here.">
  <Input name="email" type="email" />
</Field>

Set your router's link component and your framework's image component once, at the root, and Link, Button, TabLink, and Avatar use them. In the Next.js App Router, do it in a Client Component, because a Server Component can't pass functions to one, and wrap your root layout's {children} in it:

"use client";

import NextImage from "next/image";
import NextLink from "next/link";
import { HarmoProvider } from "@harmo-ui/react";

export default function Providers({ children }: { children: React.ReactNode }) {
  return (
    <HarmoProvider linkComponent={NextLink} imageComponent={NextImage}>
      {children}
    </HarmoProvider>
  );
}

Install

Install only @harmo-ui/css, or load it from a CDN as the example below does.

bun add @harmo-ui/css

npm install @harmo-ui/css

pnpm add @harmo-ui/css

yarn add @harmo-ui/css

Use it

Use the .h* classes:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@harmo-ui/css@0.2/dist/index.css" />

<button class="hbutton" type="button">
  <span class="hbutton-label">Save changes</span>
</button>

<button class="hbutton" data-variant="secondary" type="button">
  <span class="hbutton-label">Cancel</span>
</button>

<a class="hlink" href="/reports">View reports</a>

To load only what you need, import tokens.css once, then each component. Some also need companion files, such as popup.css and listbox.css for select.css:

@import "@harmo-ui/css/tokens.css";
@import "@harmo-ui/css/button.css";
@import "@harmo-ui/css/link.css";

Components with behavior, such as Select, Tabs, and Tooltip, need a script that keeps their attributes current. Each component's docs say what it does. The React components do it for you.

Copy a component

Copy a component, its styles, and what it needs into your project, so you can change anything. Copied files don't get updates on their own. 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

See the CLI for what it copies and how to use it.