Harlow UI Documentation

A comprehensive React + Tailwind CSS design system for FinTech, SaaS, Ecommerce, and native applications. 50+ components, 4 templates, complete design token system, and full dark mode support.

Quick Start

Install Harlow UI components into your project:

terminal

npx shadcn@latest add https://harlow-ui.vercel.app/r/harlow-ui.json

Usage

app/dashboard/page.tsx

1import { FqButton } from 'harlowui/primitives/fq-button'
2import { FqBankCard } from 'harlowui/finance/fq-bank-card'
3import { FqStatCard } from 'harlowui/data/fq-charts'
4
5export default function Dashboard() {
6  return (
7    <div className="flex flex-col gap-6">
8      <FqStatCard
9        title="Total Revenue"
10        value={2400000}
11        format="currency"
12        change={12.4}
13        icon={TrendingUp}
14        sparklineData={[1.2, 1.4, 1.3, 1.6, 1.8, 2.1, 1.9, 2.4]}
15      />
16      <FqBankCard theme="dark" cardType="visa" balance={12485.50} />
17      <FqButton variant="solid" size="lg">
18        Continue
19      </FqButton>
20    </div>
21  )
22}

Explore

Foundations(3)

Colors, typography, spacing tokens

Components(7)

Button, badge, avatar, input, card

Finance(5)

Bank cards, transfers, KYC

Data & Charts(5)

Charts, stat cards, tickers

Templates(4)

Full page templates

Tech Stack

React 19UI library

Next.js 16Framework

Tailwind v4Styling

RechartsCharts

Radix UIPrimitives

CVAVariants

TypeScriptType safety

LucideIcons

NextInstallation