Skip to main content

shadcn/ui

Overview​

shadcn/ui is not a traditional npm dependency: you copy Tailwind-styled components (built on Radix primitives and class-variance-authority) into your repo, giving full ownership of code. It pairs naturally with Next.js, Vite, and the Tailwind ecosystem.

Key concepts​

  • CLI add — Generates component source into your project.
  • Tailwind tokens — components.json maps to your theme.
  • Radix under the hood — Accessibility behaviors inherited from primitives.
  • Composition — Button variants, form controls, data tables via patterns.
  • Customization — Edit the copied files freely—no upstream style lock-in.

Adoption flow​

Sample: variant button (after install)​

import { Button } from '@/components/ui/button';

export function Actions() {
  return (
    <div className="flex gap-2">
      <Button variant="default">Save</Button>
      <Button variant="outline">Cancel</Button>
    </div>
  );
}

References​