shadcn-code-review

To review React components for shadcn/ui best practices, analyze CVA patterns, component composition using asChild and Slot, accessibility states like focus-visible and ARIA attributes, and data-slot usage for targeted styling to ensure maintainability.

Correct CVA implementation in shadcn/ui requires proper className handling and VariantProps usage to manage class variations, ensuring that styles are applied predictably and component variants remain maintainable.

Component composition with asChild and Slot in Radix primitives works by passing props and behaviors to a child element instead of rendering an extra DOM node, enabling flexible component composition without breaking accessibility states.

Yes, this code review checks accessibility states by verifying proper implementation of focus-visible states, ARIA attributes, and disabled states to ensure your shadcn/ui components meet accessibility standards.

Yes, you can use this to audit Tailwind CSS styling logic by reviewing data-slot usage for targeted styling and validating CVA class-variance-authority patterns to maintain code quality in your React components.

You should use data-slot attributes for targeted styling because they provide a stable hook for applying Tailwind CSS styles to specific internal parts of shadcn/ui components without breaking component composition or accessibility.