Getting Started

Installation

Quick Start#

The Formance design system is distributed as a shadcn registry. Install components directly into your project using the CLI.

npx shadcn add https://design-system-three-mauve.vercel.app/r/button.json

To avoid repeating the full URL on each install, add the Formance registry to your components.json:

{
  "registries": {
    "@formance": "https://design-system-three-mauve.vercel.app/r/{name}.json"
  }
}

Then install any component using the namespace:

npx shadcn@latest add @formance/button
npx shadcn@latest add @formance/card
npx shadcn@latest add @formance/input

You can also install components directly without configuring the namespace:

npx shadcn add https://design-system-three-mauve.vercel.app/r/button.json