Cladd

Cladd is an opinionated React UI kit designed specifically for building application-grade user interfaces where users spend extended periods, such as editors, dashboards, and internal tools. The kit emphasizes dense, breathable layouts with depth and includes a surface system, a unified sizing scale, and a curated palette of eleven accent colors, each with five variants. Cladd is intended for scenarios where a fully styled, ready-to-use set of components is needed to ship a real product, rather than for marketing sites or landing pages.

One of Cladd's distinguishing features is its surface system, which provides depth levels from 1 to 5 and supports recessed cuts, allowing panels to automatically adjust their depth when nested. The sizing scale, ranging from 2xs to 2xl, ensures consistent sizing across interactive controls, with components like chips automatically resizing when placed inside buttons. The color system is built around a single OKLCH theme variable, enabling regions to be re-skinned with a single class name and offering eleven named accent colors for flexible theming.

Cladd ships with 37 fully styled and sized components, including Toolbar, Button, NumberField, NumberScrubber, Select, Slider, List, Accordion, Calendar, Checkbox, Dialog, Input, Popover, Radio, Tabs, Textarea, Toast, Toggle Group, Tooltip, and more. These components are designed to cover every part of an application shell and are not headless primitives; each one is production-ready and styled out of the box. The API is designed to match the vocabulary of modern UI development, avoiding render props or complex class name management.

The kit is delivered as a React package, installable via npm, and is not compatible with frameworks like Vue or Svelte. Cladd is released under the MIT license, allowing for open-source use and modification. It does not require a theme generator, CLI scaffolding, or additional headless wiring, streamlining the setup process for React developers building complex applications.