shadcn/ui - A New Paradigm for Copy-Paste Components

What is shadcn/ui?

Beautifully designed components that you can copy and paste into your apps.

shadcn/ui takes a fundamentally different approach from traditional component libraries. Instead of installing a package via npm install, you copy the component source code directly into your project.

Why is this approach better?

1. Full Control

// Copy the component into your project and modify freely
export function Button({ variant = "default", ...props }) {
  return (
    <button
      className={cn(buttonVariants({ variant }))}
      {...props}
    />
  );
}

2. Optimized Bundle Size

Components you don’t use simply don’t exist in your project — no need to worry about tree shaking.

3. Escape Dependency Hell

No package version conflicts or compatibility issues. The code is yours.

Getting Started

npx shadcn@latest init
npx shadcn@latest add button

This generates the Button component source at components/ui/button.tsx.

Conclusion

shadcn/ui’s philosophy — “not a library, but a collection of components” — has resonated deeply with the developer community. It was one of the fastest-growing projects on GitHub in 2024, and this approach will influence many more projects in the future.