Design systems

A whole look,
not just a component.

Every new product needs a design system, and a generic one is the fastest way to look like everyone else. These are complete systems: the shadcn/ui components you already use, re-skinned by a single stylesheet, plus the few pieces each system adds. Install one and the whole app changes.

00

Three layers

01

Foundation

Plain shadcn/ui primitives, untouched. Button, Card, Input, Table, Dialog and the rest, installed through the shadcn CLI like any other project.

02

Skin

One stylesheet per system. It defines the system's tokens, bridges them onto the shadcn variables, and restyles details tokens cannot express by data-slot.

03

Extras

The few components a system adds on top of shadcn/ui, such as a KPI tile or a segmented control. They use the same tokens, so they match.

Because the foundation never changes, a second system is another stylesheet, not another component library. Two systems can even share a page: each one is scoped to its own class.

01

Systems

02

Build with them