Get started
Clarity by Nivoda in five minutes — what it is, who it's for, and how to consume it.
Clarity by Nivoda is Nivoda's design system: W3C DTCG tokens, shadcn/ui components, and Tailwind v4 in an Nx monorepo. Whoever builds UI — engineer, designer, or PM with an AI agent — produces design-correct output by default. The components are the design.
What's in here
- Foundations — tokens, colour, typography, spacing, elevation, motion. The primitives every component is built from.
- Components — 62 shadcn-based primitives, grouped by the job they do (Actions, Forms, Display, Feedback, Overlays, Navigation, Data, Filtering, Layout, plus PLP and PDP kits).
- Patterns — multi-component compositions like the product listing page kit.
- Content — voice, terminology, writing for UI.
- Brand — logo, expression, illustration.
Who this is for
- Engineers consuming
@nivoda/componentsand@nivoda/tokensdirectly. - Designers and PMs building flows in Minivoda with AI coding agents — same library, same guarantee. See Working with AI agents for how repo markdown fits in.
- Anyone evaluating where the system is and where it's going. Start with Principles.
Live demos
Storybook is the live component playground. This site is the system's narrative — foundations, patterns, content, brand, governance. Fumadocs documents when and why; Storybook shows what it does.