shadcn

Prevent accessibility regressions in shadcn/ui by preserving Radix primitive focus management, keyboard navigation, and ARIA attributes during component composition. This ensures screen reader support and keyboard interactions remain intact when customizing triggers or layouts.

The correct way to apply custom themes to shadcn/ui components is using CSS-variable theming combined with the cn utility for class merging. This approach maintains styling consistency and prevents Tailwind class conflicts across component variants.

Integrate React Hook Form with shadcn/ui by connecting form primitives to React Hook Form's register and control functions, pairing it with Zod validation to enforce schema rules. This combination maintains accessible error states and controlled inputs.

Yes, shadcn/ui requires TypeScript path aliases and a components.json setup to resolve component imports correctly. Configuring these files ensures the CLI generates components in the correct directories and maintains the expected architectural structure.

forwardRef breaks in Radix-based shadcn/ui components when the ref prop is not properly passed through the component hierarchy to the underlying Radix primitive. Maintaining forwardRef usage ensures parent components can access the DOM node for focus management and measurement.

The best way to manage class merging for shadcn/ui variant patterns is using the cn utility to reconcile Tailwind CSS classes. This prevents duplicate or conflicting styles when applying conditional variants and responsive UI patterns to components.