Writing
Web Development3 min read

shadcn/ui: Why It's Not Just Another Component Library

Complete guide to shadcn/ui - the copy-paste component library that's changing how we build React apps. Installation, customization, and best practices.

AGAnsh GuptaFrontend Engineer
WEB

shadcn/ui: Why It's Not Just Another Component Library

shadcn/ui isn't a traditional component library—it's a collection of copy-paste components that you own. Here's why it's brilliant.

The Philosophy

Instead of npm install huge-ui-library, you:

  1. Copy components you need
  2. Customize them directly
  3. Own your code
  4. No breaking changes

Getting Started

Installation

npx shadcn-ui@latest init

Add Components

npx shadcn-ui@latest add button
npx shadcn-ui@latest add card  
npx shadcn-ui@latest add dialog

Use Them

import { Button } from "@/components/ui/button"

export function App() {
  return <Button variant="outline">Click me</Button>
}

Why Developers Love It

1. You Own The Code

// It's YOUR component now
// components/ui/button.tsx
export function Button({ className, variant, size, ...props }) {
  // Customize anything you want
  // Add your business logic
  // No library constraints
}

2. Built on Radix UI

  • Accessible by default
  • Keyboard navigation
  • Screen reader support
  • WAI-ARIA compliant

3. Styled with Tailwind

  • Consistent design system
  • Dark mode built-in
  • Responsive by default
  • Easy customization

Real-World Examples

Custom Theme

/* globals.css */
:root {
  --primary: 224 71% 40%;
  --radius: 0.5rem;
}

.dark {
  --primary: 224 71% 70%;
}

Composed Components

// Combine primitives into custom components
export function StatCard({ title, value, change }) {
  return (
    <Card>
      <CardHeader>
        <CardTitle>{title}</CardTitle>
      </CardHeader>
      <CardContent>
        <div className="text-2xl font-bold">{value}</div>
        <Badge variant={change > 0 ? "success" : "destructive"}>
          {change}%
        </Badge>
      </CardContent>
    </Card>
  )
}

My Favorite Components

1. Command Menu (⌘K)

<CommandDialog open={open} onOpenChange={setOpen}>
  <CommandInput placeholder="Search..." />
  <CommandList>
    <CommandGroup heading="Suggestions">
      <CommandItem>Calendar</CommandItem>
      <CommandItem>Search Emoji</CommandItem>
    </CommandGroup>
  </CommandList>
</CommandDialog>

2. Data Table

Full-featured with sorting, filtering, pagination - all customizable.

3. Form with Validation

const form = useForm<FormData>({
  resolver: zodResolver(formSchema),
})

<Form {...form}>
  <FormField
    control={form.control}
    name="email"
    render={({ field }) => (
      <FormItem>
        <FormLabel>Email</FormLabel>
        <FormControl>
          <Input {...field} />
        </FormControl>
        <FormMessage />
      </FormItem>
    )}
  />
</Form>

Comparison with Others

vs Material-UI

  • MUI: Heavy, opinionated, hard to customize
  • shadcn: Lightweight, flexible, you own it

vs Ant Design

  • Ant: Great for admin panels, very styled
  • shadcn: Modern, minimal, customizable

vs Chakra UI

  • Chakra: Runtime styles, larger bundle
  • shadcn: Compile-time, zero runtime

Best Practices

  1. Create a components registry
// components/index.ts
export * from './ui/button'
export * from './ui/card'
export * from './ui/dialog'
  1. Extend, don't modify
// components/custom/submit-button.tsx
import { Button } from '@/components/ui/button'

export function SubmitButton({ loading, ...props }) {
  return (
    <Button disabled={loading} {...props}>
      {loading ? <Spinner /> : props.children}
    </Button>
  )
}
  1. Use CSS variables for theming Easy theme switching without JavaScript.

Common Patterns

Loading States

<Button disabled={isLoading}>
  {isLoading && <Loader2 className="mr-2 h-4 w-4 animate-spin" />}
  Submit
</Button>

Responsive Dialogs

// Use Sheet on mobile, Dialog on desktop
const Component = isMobile ? Sheet : Dialog

My Experience

After 6 months with shadcn/ui:

  • Ship 3x faster than custom components
  • 50% less code than other libraries
  • Zero breaking changes (you own the code!)
  • Perfect Lighthouse scores

When NOT to Use

  • Need 100+ components immediately
  • Don't want to customize anything
  • Prefer CSS-in-JS over Tailwind
  • Want managed updates

The Future

shadcn/ui represents a shift in how we think about component libraries. Instead of black boxes, we get blueprints. It's not just a library—it's a philosophy that respects developers.

Copy, paste, customize, ship. That's the shadcn way.

#shadcn/ui#React#Component Library#Tailwind CSS#Radix UI#Design System
AG

About Ansh

Frontend engineer with 4+ years building scalable SaaS products, design systems, CRM, analytics and omnichannel platforms.

More about me →

Related reading