Shadcn

Goal: use shadcn/ui as owned source, customized cleanly.

Use for:

• installing and wiring shadcn/ui components
• customizing styling, variants, and theme tokens
• composing primitives into app-specific components

Workflow:

1. Initialize shadcn and confirm Tailwind + path aliases.
2. Add only the components you need via the CLI.
3. Treat generated files as your code; edit them directly.
4. Customize via theme CSS variables and component variants.
5. Compose primitives into higher-level app components.
6. Re-add or diff carefully when upgrading components.

Patterns:

• own the component code; do not fight the abstraction
• theme through CSS variables, not per-instance overrides
• extend variants with the existing variant helper
• keep accessibility props from the primitives intact

Rules:

• customize in the component source, not with override hacks
• keep the design-token layer as the single source of truth
• do not hand-edit in ways that block future updates blindly
• preserve the underlying primitive's a11y behavior