Introduction

Cladd is an opinionated React UI kit for building applications — editors, dashboards, settings panels, internal tools. It is not a collection of headless primitives and not a marketing-page kit. It ships with a defined visual identity: recessed and raised surfaces, subtle gradients, dark-first theming, a blue accent baked in by default, and a coherent set of controls that look like they belong in the same product.

If you've used Radix or Base UI, those give you behavior and leave the design to you. If you've used Mantine or Material UI, cladd sits closer to that end of the spectrum — but more authored, denser, and tuned for information-rich screens rather than generic web apps.

Dense but not crowded

The core design principle. Cladd targets UIs where you need a lot on screen and it has to stay legible: inspector panels, kanban boards, design-tool sidebars, settings rows. The size scale is small, the spacing is tight, and every interactive control is built to sit cleanly next to its neighbors at the same row height. You pack the screen — and it stays breathable.

That single decision flows through everything else: the sizing scale (default md is 28 px, smaller than most kits ship), the surface system (nested panels read correctly without manual color picking), the accent palette (one prop tints an entire region).

What's in the box

• A surface system. Surface, SurfaceCut, and five depth levels that nest contextually — extensible past five when you need it. Surfaces inherit and offset from their parent, so nested panels read correctly without manual color picking. Covered in Foundations → Surfaces.
• A sizing scale. Seven steps from 2xs to 2xl. Button, Chip, Shortcut, and Spinner implement the full ramp. Input, NumberField, Textarea, and OTPField start at sm. Checkbox, Radio, Switch, and Slider ship sm and md only. The rule is one row, one size token — everything lines up. Covered in Foundations → Sizing.
• Eleven accent colors. neutral, brand, red, pink, purple, blue, cyan, lime, green, yellow, orange — each with the right text, fill, and outline shades for every surface variant. Set per component via color, or per region via cladd-color-{name}. Covered in Foundations → Colors.
• Application-grade components. Toolbar, Segmented, Popover, Dialog, Toast, Tooltip, Shortcut, Select, OTPField, Slider, NumberField — the parts you need for the boring shell of a real app, not just buttons and dialogs.
• Hooks for the imperative bits. useDialog, useToast, useTheme, useAccentColor, useSurface, useDevice.
• First-class TypeScript. Every component re-exports its props (ButtonProps, InputProps, …) and size union (ButtonSize, InputSize, …); shared types like Color and SurfaceVariant are exported from the package root. See TypeScript.

Already shipping

Cladd powers production apps:

• Swiper Studio — visual editor for Swiper sliders
• t0ggles — project management
• PaneFlow — created stunning slideshows in minutes
• Start Page HQ — custom New Tab dashboard with 50+ widgets

For your AI agent

Cladd ships an official MCP server at cladd.io/api/mcp. Connect it to Claude Code, Cursor, Claude Desktop, or any MCP-capable client and your agent gets the full docs at its fingertips — every component, foundation, and hook, with code examples, props, and inline screenshot URLs so it can see what a component looks like before writing layout code.

Where to next

• Installation — install @cladd-ui/react, wire up the stylesheet, wrap your app in CladdProvider. Framework-specific guides for Next.js, Vite, TanStack Start, React Router, Astro, and plain React.
• Surfaces, Colors, Sizing — the three foundations every component is built on. Read these once and the rest of the kit will make sense without per-component lookups.
• TypeScript — prop types, size unions, shared types, and the polymorphic as story.

If you're building an app and don't want to spend the first two weeks deciding what a button looks like — start with Installation.