waffle / components

The real components.css — every example on this page is the actual shipped class, not a re-styled copy like on the Patterns page. Load tokens.css + components.css and use these classes directly.

v0

First real pass at components.css. Tokens (colors, spacing, radius, shadow, motion, dark mode) are stable. Components are usable today but expect additions as more projects migrate onto them.

New tokens radius · shadow · motion

Try dark mode via your OS/browser setting — every token below repoints automatically, including the shadows (their opacity is raised in dark mode so they still read).

--radius-xs (3px)
--radius-sm (6px)
--radius-md (10px)
--radius-lg (16px)
--radius-full
--shadow-sm
--shadow-md
--shadow-lg
--duration/--ease (click)