A React UI kit for building actual apps.

Cladd is opinionated. It comes with a surface system, a sizing scale, eleven accent colors, and the components you need to ship a real product — not a landing page.

This demo is built entirely from cladd primitives — Surface, Toolbar, Button, NumberField, NumberScrubber, Select, Slider, List, etc.. Tweak the inspector; the canvas updates live.

Built with cladd

What's in the box

Four things you won't find in a primitives library.

Surface system

Surfaces

Depth levels 1–5 plus recessed cuts. Every panel knows where it sits — nest one inside another, and the next surface auto-bumps.

level 2

level 3

level 4

recessed cut

Sizing scale

Sizing

One scale — 2xs through 2xl — that every interactive control respects. Drop a chip into a button and it auto-shrinks 8px.

nests auto-shrink

Eleven accents

Colors

Eleven named accent colors × five variants, all built on one OKLCH theme variable. Re-skin a region with one className.

purple

App-grade controls

Components

The boring app-shell parts ship in the box — Toolbar, Segmented, Select, NumberField, Shortcut. Wire them up, ship faster.

CTRLK

API

Short code. Real output.

No render props, no className gymnastics. Props that match the vocabulary of an actual UI.

<Toolbar size="sm">
  <ToolbarButton><BoldIcon /></ToolbarButton>
  <ToolbarButton><ItalicIcon /></ToolbarButton>
  <ToolbarButton><UnderlineIcon /></ToolbarButton>
  <ToolbarSeparator />
  <ToolbarButton color="brand" outline>
    Save
  </ToolbarButton>
</Toolbar>

<Surface level={1} outline>
  Outer
  <Surface outline>
    Nested — auto-bumps to level 2
    <SurfaceCut outline>
      Recessed cut inside
    </SurfaceCut>
  </Surface>
</Surface>

Outer

Nested — level 2

Recessed

<Button color="brand" size="lg" variant="gradient-fill">
  Save changes
</Button>
<Button size="lg">Cancel</Button>

Catalog

Every part of an app shell, in the box.

29 components — not headless primitives. Every one ships styled, sized, and ready for a real product.

CTRLK

Is cladd for you?

Built for one kind of job. Not every kind.

Reach for cladd when…

Building an editor, dashboard, or internal tool
Users will spend hours in it, not seconds
You want dense, breathable UIs with depth
Dark-first is a feature, not a chore
You want decisions made — not a blank canvas

Reach for something else when…

Marketing site or landing pageshadcn · Tailwind UI
You want unstyled primitives to skin yourselfRadix · Base UI · React Aria
You need a massive component catalogMaterial UI · Ant Design
You’re on Vue or Sveltecladd is React only, sorry

Ready to build a real app?

One install. No theme generator, no CLI scaffolding, no headless wiring to write yourself.

$npm i @cladd-ui/react

Get started

Star on GitHub