shadcn/ui — 복사해서 쓰는 컴포넌트 라이브러리

shadcn/ui란

npm 패키지가 아닌, 소스 코드를 직접 프로젝트에 복사하는 컴포넌트 컬렉션입니다. 완전한 커스터마이징이 가능합니다.

설치

npx shadcn@latest init
npx shadcn@latest add button dialog table

// 컴포넌트가 프로젝트에 직접 복사됨
// components/ui/button.tsx
// components/ui/dialog.tsx

커스터마이징

// components/ui/button.tsx 직접 수정
const buttonVariants = cva(
  "inline-flex items-center justify-center rounded-md",
  {
    variants: {
      variant: {
        default: "bg-primary text-primary-foreground",
        destructive: "bg-destructive text-destructive-foreground",
      },
    },
  }
);