DocsGetting StartedInstallation

Installation

Get Harlow UI into your project in seconds. Choose your preferred method below.

Install via Homebrew

The fastest way to get started. Installs the CLI tool and scaffolds a new project with all components.

terminal

brew tap harlow-ui/tap
brew install harlow-ui

Create a new project

terminal

harlow-ui init my-fintech-app
cd my-fintech-app
pnpm dev

Add to an existing project

terminal

cd your-existing-project
harlow-ui add --all

Or add specific component categories:

terminal

harlow-ui add primitives    # buttons, badges, avatars, inputs, cards
harlow-ui add finance       # bank cards, transactions, transfers, KYC
harlow-ui add data          # charts, stat cards, tickers
harlow-ui add marketing     # hero, pricing, testimonials, footer

CSS Custom Properties

Every Harlow token is exposed as a CSS custom property using the --harlow-ui-* namespace. This means you can override any token at any scope.

Token Naming Convention

1/* All Harlow tokens follow this pattern: */
2--harlow-ui-{{token-name}}
3
4/* Examples: */
5--harlow-ui-brand: oklch(0.68 0.21 38.5);
6--harlow-ui-brand-foreground: oklch(1 0 0);
7--harlow-ui-brand-muted: oklch(0.95 0.04 38.5);
8--harlow-ui-primary: oklch(0.68 0.21 38.5);
9--harlow-ui-background: oklch(0.99 0 0);
10--harlow-ui-foreground: oklch(0.12 0 0);
11--harlow-ui-card: oklch(1 0 0);
12--harlow-ui-border: oklch(0.90 0 0);
13--harlow-ui-radius: 0.625rem;
14--harlow-ui-shadow-card: 0 1px 3px oklch(0 0 0 / 0.06);

Override at any scope

Apply overrides globally, per-section, or per-component. The easing transitions apply automatically.

Custom Overrides

1/* Global override — changes entire app */
2:root {
3  --harlow-ui-brand: oklch(0.64 0.14 360);   /* Rose theme */
4}
5
6/* Scoped override — changes just this section */
7.pricing-section {
8  --harlow-ui-brand: oklch(0.60 0.16 290);   /* Violet for pricing */
9}
10
11/* Per-component override */
12.special-card {
13  --harlow-ui-card: oklch(0.14 0 0);
14  --harlow-ui-card-foreground: oklch(0.97 0 0);
15}

Full Token Reference

Brand

--harlow-ui-brand--harlow-ui-brand-foreground--harlow-ui-brand-muted--harlow-ui-brand-subtle

Surface

--harlow-ui-background--harlow-ui-surface--harlow-ui-surface-raised--harlow-ui-foreground

Semantic

--harlow-ui-primary--harlow-ui-secondary--harlow-ui-muted--harlow-ui-accent--harlow-ui-destructive--harlow-ui-success--harlow-ui-warning--harlow-ui-info

Layout

--harlow-ui-border--harlow-ui-input--harlow-ui-ring--harlow-ui-radius--harlow-ui-shadow-card--harlow-ui-shadow-brand

PreviousIntroduction NextTheming