Some more on the why and how -
Cladd started as the internal UI inside t0ggles (my project-management tool) because none of the popular options handled dense application UIs well.
Most UI kits hand you the same surface color at every nesting level. Put a card inside a card inside a popover and you end up writing one-off CSS to fake the depth contrast.
Headless primitives like Radix or Base UI hand you behavior and ask you to do everything else. Great for design systems, exhausting for shipping a product.
And most overlay APIs make you mount Root/Portal/Content scaffolding somewhere in your component tree, even when you just want to fire a dialog from a hook.
Cladd's specific bets:
- A surface system with five depth levels that nest contextually — drop a Surface inside a Surface, the next one auto-bumps.
- A single sizing scale (2xs → 2xl) every interactive control respects, so rows line up without per-component math.
- 11 accent colors × 5 variants. One className re-tints a region.
- Every overlay is driveable from anywhere — useDialog() from a handler, no JSX scaffolding.
- There's also an MCP server at https://cladd.io/mcp so coding agents (Claude Code, Cursor) can pull full docs with inline screenshots before generating layout.
- What it's not for: marketing sites, Vue/Svelte projects, or anyone who wants headless primitives to skin themselves.
Docs and demos: https://cladd.io
Repo: https://github.com/cladd-ui/cladd
Would love feedback — what's missing, what feels off, what's broken on your screen.
