Installation

Swiss UI is distributed as a shadcn registry. Install the theme once, then add components with the CLI.

Requirements

A project using Tailwind CSS v4 and a shadcn-initialized components.json. If you do not have one, run npx shadcn@latest init.
The lucide icon library (the shadcn default).

Install the theme

Add the swiss style first. It writes the design tokens, the .label and .grid-lines utilities, and the progress keyframes into your global stylesheet, and installs the Geist and Geist Mono fonts — so every component renders correctly.

bash

npx shadcn@latest add https://swiss.ui.unsanity.ai/r/swiss.json

Add components

Add any component by pointing the shadcn CLI at its registry URL. Internal dependencies—other primitives, the cn helper, hooks, and npm packages—are resolved automatically.

bash

npx shadcn@latest add https://swiss.ui.unsanity.ai/r/button.json

Browse the full list on the components page. Each component page has its own install command, usage, and examples.

Namespace (optional)

Instead of pasting full URLs, register the @swiss namespace once, then install items by short address like @swiss/button.

bash

npx shadcn@latest registry add @swiss=https://swiss.ui.unsanity.ai/r/{name}.json

Or add it manually under registries in your components.json:

json

{
  "registries": {
    "@swiss": "https://swiss.ui.unsanity.ai/r/{name}.json"
  }
}

Then add the theme and any component by namespace:

bash

npx shadcn@latest add @swiss/swiss
npx shadcn@latest add @swiss/button

Theme tokens

The full token reference, dark mode, and examples live on the theming page. The signal accent and radius scale are defined like this:

css

:root {
  --signal: oklch(0.57 0.224 27);
  --radius: 0rem;
}