🌐
웹개발
shadcn/ui
shadcn/ui
복사해서 사용하는 React 컴포넌트 컬렉션. Radix UI + Tailwind 기반.
상세 설명
shadcn/ui는 "복사해서 사용하는" React 컴포넌트 컬렉션입니다. npm 패키지로 설치하는 대신, 소스 코드를 프로젝트에 직접 복사하여 완전한 커스터마이징이 가능합니다.
- Radix UI 기반: 접근성이 보장된 헤드리스 컴포넌트
- Tailwind CSS 스타일링: 유틸리티 클래스로 빠른 커스터마이징
- 소유권: 코드가 내 프로젝트에 있어 완전한 제어 가능
- CLI 도구: npx shadcn-ui add button 으로 간편 추가
Next.js 공식 문서에서 사용되며, Vercel의 v0.dev에서도 채택해 급성장 중입니다.
코드 예제
# 초기화
npx shadcn-ui@latest init
# 컴포넌트 추가
npx shadcn-ui@latest add button
npx shadcn-ui@latest add dialog
# 사용
import { Button } from "@/components/ui/button"
function App() {
return (
<Button variant="outline" size="lg">
클릭하세요
</Button>
)
}
실무 대화 예시
디자이너
"UI 라이브러리 버튼 스타일 바꾸기 어렵다던데?"
개발자
"shadcn/ui는 코드가 우리 프로젝트에 있어서 마음대로 수정 가능해요. Tailwind 클래스만 바꾸면 돼서 디자인 시스템 적용도 쉬워요."
주의사항
업데이트 수동 관리: npm 패키지와 달리 업데이트를 수동으로 적용해야 합니다.