Introduction
A warm-neutral design system for the agents platform — every shadcn/ui primitive restyled to one coherent language, built on Tailwind v4, React 19 and Radix.
Colour, typography, radius and elevation are shared CSS variables, so the whole system retints from a single file. Drop a .theme-* class on any ancestor and its buttons, toggles, focus rings and charts follow. This documentation is generated from the same components you ship — every preview below is the real thing.
The six rules
Every component follows these. If a new component breaks one, it isn’t done.
Buttons and inputs are rounded-lg (rounded-md at small sizes). Tabs, chips and nav pills stay rounded-full.
Icon buttons and tiles use explicit pixel radii so the token scale can’t collapse them into circles.
--selected is the bright brand lime that fills an active state — switch, checkbox, radio, slider, selected day — carrying --selected-foreground as its ink. --selected is the same hue pulled darker, for accent text, focus rings and hairline marks that have to stay legible. Blue --info is reserved for informational items.
soft → tile → card → float. Raised controls, tiles, cards, then popovers and dialogs.
Geist Variable at 0.9375rem with −0.011em. Headings are semibold at −0.02em.
Stone-tinted greys on a #F5F4F0 paper background — never pure cool grey.
What’s inside
- 117 documented components — every shadcn primitive plus a bespoke set for agents (cards, orbs, tiles).
- One token file — colour, type, radius and shadow live in
src/index.css.
Pesto UI · 117 documented components