u/nolimits4web

Cladd - opinionated React UI kit for editors, dashboards, and dense application UIs
▲ 10 r/reactjs

Cladd - opinionated React UI kit for editors, dashboards, and dense application UIs

Hey r/reactjs - I just open-sourced cladd, a React UI kit I've been building for two years. Posting here because I think it'll be useful for devs building actual apps, not just landing pages.

Quick context: I've been making UI libraries for a decade - Swiper, Framework7, Konsta UI. cladd is different from those: it's specifically for information-dense React applications. The kind of UI where you have 40 controls on one screen and they all need to stay clean and readable.

It started as the internal UI for t0ggles (my project management tool), then I kept improving it. Today it powers Swiper Studio, t0ggles, PaneFlow, and Start Page HQ in production.

Why I built it instead of using existing options

  • Most UI kits give you the same surface color at every nesting level. Put a card inside a card inside a popover and you're writing one-off CSS to fake depth.
  • Headless primitives (Radix, Base UI) hand you behavior and ask you to do everything else. Great for design systems, exhausting for shipping a product.
  • Overlay APIs usually need Root/Portal/Content scaffolding in your component tree, even when you just want to fire a dialog from a hook.

What cladd ships

  • A surface system with 5 depth levels that nest contextually - drop a Surface inside a Surface and the next one auto-bumps.
  • A single sizing scale (2xs → 2xl) that every interactive control respects. Drop a Chip inside a Button at the same size - the Chip auto-shrinks 8px so the row stays clean.
  • 11 accent colors × 5 variants. One className re-tints a region.
  • Every overlay is controllable from anywhere - useDialog() from any handler, no JSX scaffolding.
  • An MCP server at cladd.io/mcp so coding agents (Claude Code, Cursor) can pull docs with inline screenshots before generating layout.

Stack: React 19, Tailwind v4, MIT.

What it's NOT for: marketing sites, headless-primitives use cases, Vue/Svelte, or anyone who wants to skin everything themselves.

Links

Will appreciate any feedback - especially: which components are missing, what feels weird in your projects, where the API trips you up. Happy to answer questions in the comments.

u/nolimits4web — 15 hours ago