Design System Components

Build reusable components that leverage design tokens with Surface primitives and CVA (class-variance-authority).

When to Use

• Building component libraries with design tokens
• Need variant-based styling (size, color, state)
• Creating layered UI with consistent surfaces
• Want type-safe component APIs

Pattern 1: Surface Primitive

Single component for all layered surfaces: