shadcn-code-review

CVA pattern reviews check variant handling, VariantProps exports, and compound variants in shadcn/ui components. Use the review checklist to validate that variants are correctly defined, exported, and applied through CVA utilities, ensuring type-safe styling and predictable behavior.

Key accessibility states include focus-visible for keyboard navigation, aria-invalid for validation states, disabled attribute handling, sr-only text for screen readers, and proper ARIA attributes. Data-slot attributes enable stable selectors for these states without brittle CSS dependencies.

Yes, asChild enables composition by forwarding Slot props to child elements, allowing polymorphic rendering without wrapper divs. Verify asChild usage respects Radix primitives and maintains accessibility context across composed components.

Data-slot attributes provide stable, semantic selectors for targeting component parts in CSS and has() selectors without relying on fragile class name structures. They improve maintainability and enable scoped styling that survives refactoring.

CVA provides type-safe, composable variant management with VariantProps and compound variants, while raw Tailwind classes lack structure. CVA integrates with Tailwind in shadcn/ui to deliver predictable, maintainable variants across complex component hierarchies.

Yes, exporting VariantProps enables type inference and documentation for component variant props, allowing consumers to compose variants safely. This pattern is essential for polymorphic components built with CVA and asChild.