radix-ui-design-system

Build production-ready, accessible design systems using Radix UI primitives with full customization control and zero style opinions. Radix UI provides unstyled, accessible components (primitives) that you can customize to match any design system. This skill guides you through building scalable component libraries with Radix UI, focusing on accessibility-first design, theming architecture, and composable patterns. Key Strengths: Every Radix primitive is built with accessibility as the foundation: Rule : Never override accessibility features. Enhance, don't replace. Radix provides behavior , you provide appearance : Build complex components from simple primitives: Every Radix component follows this pattern: Best for : Maximum portability, SSR-friendly Best for : Tailwind projects, variant-heavy components Best for : Runtime theming, scoped styles Use case : Share state between primitive parts Use case : Render as different elements without losing behavior Why asChild matters : Prevents nested button/link issues in accessibility tree. Rule : Use controlled when you need to sync with external state (URL, Redux, etc.). Always use asChild to avoid wrapper divs Provide semantic HTML Use CSS variables for theming Compose primitives for complex components Don't skip accessibility parts Don't fight the primitives Don't mix controlled and uncontrolled Don't ignore keyboard navigation...