ui-design-system

Production-ready React UI components with TailwindCSS, Radix UI, and shadcn/ui. Comprehensive UI/UX design, review, and improvement for modern web applications. Production-ready implementations with TailwindCSS + Radix UI + shadcn/ui and modern React patterns. Layer 1: TailwindCSS (Styling Foundation) Layer 2: Radix UI (Behavior & Accessibility) Layer 3: shadcn/ui (Beautiful Components) Key Principle: Each layer enhances the one below. Start with Tailwind for styling, add Radix for accessible behavior, use shadcn/ui for complete components. Systematic evaluation of existing interfaces: Creating production-ready interface designs: Enhancing existing implementations: Framework-agnostic styling approaches: Example scenarios: Hero sections, grid layouts, cards without interaction, text styling Example scenarios: Custom date picker, unique navigation pattern, specialized modal behavior Example scenarios: Admin dashboards, CRUD applications, settings pages, data tables Start simple, enhance as needed: Build complex UIs from simple, reusable components: Radix UI handles accessibility automatically: Never override accessibility features - enhance them. Use Tailwind's design system consistently: Always design mobile-first, scale up: Tailwind Config: CSS Variables (Three-Tier System): Color Space Recommendation: Token Storage: Path Aliases: Use shadcn/ui components as base, customize...