shadcn/ui Component Patterns

Guidelines for building accessible, themeable UI components based on Radix UI and Tailwind CSS.

Design Philosophy

• •Composition: Build complex components from small, reusable primitives.
• •Accessibility: Ensure every component meets WCAG standards and supports keyboard navigation.
• •Customization: Use clsx and tailwind-merge for flexible styling without breaking defaults.

Key Patterns

• •Variants: Use class-variance-authority (CVA) to manage component states (e.g., small, large, primary, ghost).
• •Radix UI Primitives: Leverage the "Unstyled" nature of Radix for full control over aesthetics.
• •Theming: Use CSS variables for colors to support easy light/dark mode switching.

How to Use

• •Reference when implementing new components/ui elements.
• •Apply when debugging accessibility or responsive layout issues.
• •Use for extending existing components with new props or variants.