React 전용 UI 라이브러리로
Radix UI Primitives 라이브러리 등의 스타일 없이 핵심 기능만 제공하는 헤드리스(Headless) 컴포넌트를 근간으로 테마 색상을
Tailwind CSS 기반의 CSS 변수로 적용하여 간편하게 제공하는 테마 커스터마이징과 함께, 컴포넌트 또한 설치가 아닌 소스 제공 방식으로 입맛에 맞게 커스터마이징할 수 있는 UI 컴포넌트 템플릿 라이브러리. 라이브러리인 이유는, 라이브러리 식으로 구조화가 되어 있으며, 쉽게 UI 컴포넌트 기본형과 종속성을 설치할 수 있도록 명령 인터페이스(
npx shadcn)을 제공하기 때문이다. 쉬운 설치와 유연한 커스터마이징 혜택에 인기기 많아지자 주요 프론트엔드 별로 파생 라이브러리가 등장했고,
Vercel이 만든 생성형 UI 서비스
https://v0.dev 에 기본 컴포넌트로 채택될 정도로 생성형 AI를 보조로 개발 시 적극적으로 차용하고 있다.
Claude 등 AI 개발 도구가 코드 생성을 가장 훌륭하게 제공해주는 UI 환경 도구다.
이 UI 라이브러리의 핵심 기능이 바로 레지스트리로,
npm 처럼 신뢰할 수 있는 장소에서 UI 컴포넌트를 받으면서 필요한 종속성을 자동으로 설치해주는 환경을 제공한다.
공식 레지스트리 사이트에서 공식 및 협력 오픈소스 프로젝트에서 제공하는 다양한 레지스트리를 사용할 수 있으며, 여기에 없어도 다른 사이트로부터 제공되는 레지스트리를 통해 설치할 수 있다.
공식에서 제공 시 아래와 같은 패턴을 가지며,
퍼스트 파티:
npx shadcn add button세컨드 파티:
npx shadcn add @provider/component타사 레지스트리는 아래와 같이 URL로 제공한다.
서드 파티:
npx shadcn add https://3rdparty.registry/path/to/component단, 다른 사이트 레지스트리 사용 시, 종속성 설치 특성 상 악성코드 설치 가능성이 있는 만큼 레지스트리를 확인하고, 제공되는 UI와 필요한 라이브러리가 확실한지 꼼꼼히 체크해야 할 필요성이 있다.
3. 관련 프로젝트
1. 관련 문서