Introduction
What Plinth is and the ideas it stands on.
Plinth is a design system built from the ground up: an extensive React component library on a strict token foundation, documented well enough that both people and AI coding tools can build real products with it.
The ideas
Tokens before components. Every component styles itself against semantic
tokens (--surface, --border-strong, --primary), never raw values. Swap one
CSS file and the whole system rebrands. Light and dark mode come from the same
mechanism, not from per-component overrides.
Accessible by construction. Interactive components are built on Base UI primitives, the headless library from the team behind Radix, Material UI and Floating UI. Keyboard navigation, focus management and screen reader semantics are handled at the foundation, and every component is verified against them before it ships.
Own the code. Plinth follows the registry model: components are installed as source files into your project, not imported from a black-box package. Change whatever you want. The shadcn CLI does the copying.
AI-ready. Every page of these docs is available as plain markdown (the copy
button above, llms.txt for the full index). Registry URLs mean Claude Code,
Cursor and Codex can install and compose Plinth components without guessing.
Status
Plinth is in active development. The foundation (tokens, theming, docs and registry) is live. Components are being added one at a time, each one verified (states, keyboard, dark mode) before the next begins.