Formance Design System
Getting Started
  • Introduction
  • Installation
  • Colors
  • Typography
  • Theming
Atoms
  • Introduction
  • Accordion
  • Alert
  • Alert Dialog
  • Aspect Ratio
  • Attachment
  • Avatar
  • Badge
  • Badge Eyebrow
  • Badge Status
  • Breadcrumb
  • Button
  • Button Group
  • Calendar
  • Card
  • Carousel
  • Chart
  • Checkbox
  • Code Editor
  • Code Snippet
  • Collapsible
  • Combobox
  • Command
  • Context Icon
  • Context Menu
  • Description List
  • Dialog
  • Drawer
  • Dropdown Menu
  • Empty
  • Endpoint
  • Eyebrow
  • Field
  • Form
  • Hover Card
  • Input
  • Input Group
  • Input OTP
  • Input Password
  • Item
  • Kbd
  • Label
  • Loader
  • Menubar
  • Nav Tabs
  • Navigation Menu
  • Pagination
  • Popover
  • Progress
  • Radio Group
  • Radio Group Card
  • Radio Group Stacked
  • Resizable
  • Scroll Area
  • Select
  • Separator
  • Sheet
  • Sidebar
  • Skeleton
  • Slider
  • Sonner
  • Sortable
  • Spinner
  • Stepper
  • Switch
  • Table
  • Tabs
  • Textarea
  • Toggle
  • Toggle Group
  • Tooltip
  • Typography
Fragments
  • Introduction
  • API Snippet
  • App Card
  • App Card Empty
  • Copy Button
  • Copy Page
  • Data Table
  • Key Value Input
  • Ledger Schema
  • Ledger Schema Editor
  • Markdown
  • Mode Toggle
  • Multi Select
  • Page Container
  • Page Header
  • Page Section
  • SSO Button
Examples
  • Code
  • Forms
Brand
  • Formance Logo

Formance Design System

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

Get started

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.
Powered by
GitHubWebsite