Formance Design System

The open-source component registry for Formance. Install any component into your project with the shadcn CLI.

Open Source

Tailwind v4

shadcn Registry

Quick Start

Add the Formance registry to your project, then install components:

npx shadcn add https://design-system.localhost/r/button.json
npx shadcn add https://design-system.localhost/r/card.json
npx shadcn add https://design-system.localhost/r/input.json

Explore

Colors

Brand palettes and semantic colors in OKLCh.

Typography

Polymath, Figtree, and Berkeley Mono typefaces.

Theming

Light and dark mode via CSS custom properties.

Components

25+ components built on Radix UI primitives.

Brand

Formance logo and icon in multiple sizes.

Installation

Install components with the shadcn CLI.

Press ⌘K to search

Command Menu

Formance Design System

Quick Start

Explore