shadcn/ui 완벽 가이드 — 복붙으로 만드는 UI

Copy-paste 방식의 UI 라이브러리 shadcn/ui 사용법.

shadcn/ui는 일반적인 npm 패키지가 아닙니다. 컴포넌트 코드를 내 프로젝트에 직접 복사하는 방식입니다. Radix UI + Tailwind CSS 기반이며, 모든 코드를 직접 수정할 수 있습니다.

npx shadcn@latest init으로 초기화 → npx shadcn@latest add button으로 필요한 컴포넌트 추가. 추가된 코드는 components/ui/ 폴더에 저장됩니다.

Vercel의 v0에서 생성된 UI는 shadcn/ui 기반입니다. v0에서 디자인 → 코드 복사 → 내 프로젝트에 적용하는 워크플로우가 매우 매끄럽습니다.