shadcn

To install shadcn UI components correctly, use the npx shadcn@latest CLI commands to search, view docs, and add components rather than manually fetching files. This ensures proper composition, styling, and adherence to your project's specific configuration and semantic tokens.

The best way to update shadcn/ui components safely is by using the CLI's validated update workflows with --dry-run and --diff flags. This helps identify potential conflicts and prevents incorrect manual edits to your base component configurations.

Switching between radix and base presets in shadcn causes behavioral differences in forms and overlay components like Dialog, Sheet, and Drawer due to underlying API variations. You must apply the specific composition and input constraints tied to your active preset.

Yes, you can apply Tailwind CSS for custom variants and layout, but you must follow Critical Rules for layout, semantic tokens, icon usage, and overlay titles. Correct shadcn implementation requires enforcing these specific styling constraints.

Manually editing shadcn/ui component files bypasses the project's required composition and styling rules, leading to inconsistent accessibility and layout. It prevents you from leveraging the CLI's validated update workflows, making component maintenance and future updates error-prone.

To ensure accessibility when composing shadcn UI components, follow the enforced component composition rules for forms, overlays, icons, and spacing. The framework's Critical Rules automatically apply the necessary semantic tokens and structure to maintain accessibility standards.