A comprehensive React + Tailwind CSS design system with 50+ components, marketing blocks, full-page templates, and a complete token architecture. Built for FinTech, SaaS, Ecommerce, and native applications.
npx shadcn@latest add https://harlow-ui.vercel.app/r/harlow-ui.jsonA complete token system covering color, typography, spacing, radius, and shadow. All CSS custom properties prefixed with --harlow-ui- for effortless theming.
Hero brand color with semantic states for financial, SaaS, and ecommerce contexts.
Lato for body copy, Sora for display headings, JetBrains Mono for code and financial figures.
Sora — Display font for hero content and major headings
Lato — Clean geometric sans-serif for body copy
JetBrains Mono — For amounts, account numbers, codes, and tabular data
Contextual color usage for financial data states
Consistent spacing tokens following an 8-point grid system.
From sharp micro-radius to full pill shapes.
Layered elevation system from card-level to modal-level depth.
Production-ready, accessible, and fully typed primitives with multiple variants, sizes, and states.
8 variants, 6 sizes, loading states, icon support
Variants
Sizes
With Icons & States
Status indicators, live states, dot indicators for financial data
Variants
With Dots & Live States
Sizes
Finance Contexts
Sizes, status indicators, groups, fallbacks
Sizes
Status Indicators
Avatar Groups
Controlled inputs with leading/trailing icons, states, and variants
Amount exceeds daily limit of $10,000
Valid IBAN format detected
Container primitives with header, body, footer variants
Standard card with border and shadow. Use for grouping related content.
Higher elevation for priority content, modals, or overlays.
Highlighted with brand orange accent. Use for featured or promotional content.
Portfolio +12.4%
All-time high reached
Suspicious Activity
Review flagged transactions
Add New Card
Progress bars, skeletons, and loading states
Dividers, empty states, keyboard shortcuts, copy buttons
Dividers
Keyboard Shortcuts
Copy Button
Empty States
No transactions yet
Your transaction history will appear here once you make your first transfer.
Bank cards, transaction lists, balance heroes, transfer flows, KYC verification, savings goals -- everything a neobank, payment, or embedded-finance frontend needs.
Animated debit/credit cards with reveal interactions, 5 themes, 3 states
Balance display with optional blur, 24h change indicator, and quick action buttons
Grouped by date, status indicators, icons per merchant category
Multi-step transfer form with recipient selector and payment method
Verification steps, document upload, tiered access levels
For compact flows and onboarding headers
All pages including bio data page
passport_scan.pdf
Must be dated within 3 months
utility_bill_march.pdf
Clear photo of your face
Account level display with feature lists and upgrade CTAs
Progress tracking with animated fill and milestone indicators
Recharts-powered charts, stat cards, sparklines, asset allocation, live tickers, and metric rows. All theme-aware.
Multiple sizes and variants for key metrics
Inline horizontal metrics strip for dashboard headers
Area, bar, and donut charts with custom tooltips and financial formatting
Auto-scrolling price ticker with real-time change indicators
Pre-composed page sections -- hero, features grid, pricing, testimonials, CTA, and footer -- ready to drop into any product site.
100+ production-ready components, blocks, and templates designed for BaaS, FinTech, and the next generation of digital banking products.
Every component is designed for the unique demands of financial product design — from micro-interactions to multi-step KYC flows.
Cards, POS terminals, virtual cards, payment flows, and checkout components built for real BaaS products.
Sparklines, area charts, portfolio donut charts, and real-time crypto tickers with Recharts.
Identity verification flows, document upload, biometric check UIs, and compliance dashboards.
Full dashboard, onboarding, account management, settings, and transaction history templates.
Zero external CSS dependencies. Pure Tailwind v4, tree-shakable, optimized for Core Web Vitals.
ARIA labels, keyboard navigation, screen reader support, and WCAG 2.1 AA compliance built in.
All components support right-to-left layouts and are designed for global financial products.
Semantic CSS variables, light/dark mode, and a comprehensive spacing and typography system.
Start for free. Upgrade when you need the premium templates and Figma files.
All components available. Perfect for personal projects and prototypes.
Everything in Free plus premium templates, Figma kit, and priority support.
For engineering teams building at scale. Unlimited projects, SLA support.
"Harlow UI saved us 3 months of design system work. The financial components are incredibly polished — exactly what we needed for our neobank launch."
"The KYC flow components alone are worth the Pro price. Everything is accessible, type-safe, and fits perfectly into our existing Next.js codebase."
"We replaced our entire design system with Harlow UI in a sprint. The dark mode is stunning and the orange brand palette works perfectly for us."
Join hundreds of engineering teams using Harlow UI to ship financial products faster. Start free, upgrade when you need more.
Full page layouts ready for production. Click through to see live interactive demos.
Full neobank dashboard with sidebar, stats, charts, cards, and transactions.
Multi-step onboarding with document upload, tier unlocking, and identity verification.
Full transaction ledger with filters, search, CSV export, and a detail drawer.
Account settings with profile, security, notifications, card controls, and preferences.