# shadcn/ui in 2025: Building a Complete Design System
Picked up shadcn on a Friday. By Sunday, I had something running in production. Here's my actual learning path.
Why This Matters (and Why I Care)
Most design systems React developers use are bloated. MUI? 50MB+ in node_modules. Chakra? Great DX, but you fight their opinionated styling. shadcn ui flips everything. It's not a library—it's a collection of headless UI components you copy directly into your project. Full control. Zero dependencies beyond Tailwind. At Beyin Digital, we switched our e-commerce client from MUI to shadcn components. Build time dropped 40%. Bundle size? Cut in half. That's real.
The Basics You Actually Need
Install is deceptively simple:
// No npm install shadcn/ui
npx shadcn@latest init
// Then add components:
npx shadcn@latest add button card dialog
Each component is a file in `components/ui/`. You own it. Modify it. Break it. Fix it. That's the point.
How I Build With It (Step by Step)
For our Abu Dhabi client's dashboard, I built a complete design system React in 3 hours:
// components/ui/data-table.tsx - real production code
import { Table, TableHeader, TableRow } from "@/components/ui/table"
import { Button } from "@/components/ui/button"
export function DataTable({ data }: { data: Item[] }) {
return (
<Table>
<TableHeader>
<TableRow>Name</TableRow>
<TableRow>Status</TableRow>
<TableRow>
<Button variant="outline" size="sm">Actions</Button>
</TableRow>
</TableHeader>
{/* ... */}
</Table>
)
}
Customize the `button.tsx` file to match your brand colors. That's it. No theme provider. No CSS-in-JS overhead.
Mistakes I Made (So You Don't Have To)
1. **Over-customizing early.** I changed every Tailwind default before shipping. Don't. Ship with defaults, iterate later.
2. **Not reading the source.** The beauty is you can see exactly how `Dialog` or `DropdownMenu` works. I wasted 2 hours on a focus trap issue—the fix was in the source code.
3. **Forgetting accessibility.** shadcn components are built on Radix UI—they handle ARIA attributes. But I broke them once by overriding a `role` prop. Don't touch what you don't understand.
Advanced Tips From Production
My Honest Take
shadcn/ui isn't perfect. If you need a 100-component library out of the box, look elsewhere. But if you value control, performance, and learning how components actually work under the hood? This is the best design system React approach I've used in 5 years. It's not just a tool—it's a philosophy.
---
*Mohamed Qurashi | Full-Stack Developer at Beyin Digital | [https://qurashi.dev](https://qurashi.dev)*
---
**Further reading:**
**Related articles on this blog:**