React Design System

Atomic decision guides for building reusable, composable, well-typed React components. Targets React 19, Next.js App Router, Tailwind CSS v4, Radix UI, and CVA.

I need to...	Guide
Decide component architecture (flat vs compound vs headless)	Component Architecture Decisions
Design a component's props API	Props Patterns
Handle children, slots, or asChild	Children and Slot Patterns
Build compound components with shared state	Composition Patterns
Use Tailwind with cn() and CVA	Tailwind Integration
Manage size/color/state variants	Variant Management
Connect design tokens in Tailwind v4	Design Token Consumption
Type components in TypeScript	TypeScript Patterns
Make components accessible	Accessibility Patterns
Document components in Storybook	Storybook Integration
Organize component files and folders	Component Organization
Build form components with react-hook-form	Form Components
Build layout primitives (Stack, Flex, Grid)	Layout Components
Optimize render performance	Performance
Test design system components	Testing
Follow best practices and avoid anti-patterns	Best Practices and Anti-Patterns
Find source references and maintenance notes	Sources and Maintenance