shadcn/uiDesign SystemRadixTailwind
shadcn/ui flipped the component-library model on its head. Instead of installing a package you can't edit, you run a command that copies the component's source into your project. You own it, you style it, you change it.
Add a Component
bash
npx shadcn@latest add button dialog dropdown-menuThis drops accessible, Radix-powered components into components/ui/. They're yours now — tweak the markup, classes, and variants freely.
Theme With CSS Variables
css
:root {
--primary: 84 81% 44%; /* your brand */
--radius: 0.75rem;
}
.dark { --primary: 84 81% 50%; }Why Teams Choose It
- Accessibility built in via Radix primitives (focus traps, ARIA, keyboard nav).
- No version-upgrade pain — the code lives in your repo.
- Consistent theming through Tailwind + CSS variables across the whole app.
Make It Your Own
Treat the generated components as a starting point. Rename, refactor, and bake in your brand so your design system feels bespoke, not off-the-shelf.
