Shadcn CLI Makes Code Sharing Stupidly Simple
- Shadcn CLI는 단순 컴포넌트 모음에서 코드 생성, 공유, 테마 적용을 위한 전체 시스템이자 코드 배포 플랫폼으로 발전했습니다. 🚀
- 테마, 컴포넌트, 훅 등 모든 종류의 코드를 Shadcn CLI를 통해 쉽게 공유하고 배포할 수 있습니다. 📦
- '프리미티브'는 레고 조각처럼 기본적인 재사용 가능한 컴포넌트를, '블록'은 이 프리미티브들을 조합하여 완성된 UI 요소를 의미하며, Shadcn은 이러한 구성에 강점을 보입니다. 🧱
- 코드를 공유하려면
registry/[스타일_이름]/[코드_유형] (예: registry/default/ui)과 같은 특정 파일 구조를 따라야 합니다. 📁
- 프로젝트 루트에
registry.json 파일을 생성하여 공유할 컴포넌트의 이름, 유형, 제목, 설명, 파일 경로 및 의존성을 정의합니다. 📝
type 필드는 해당 코드가 사용자 프로젝트의 어느 위치에 설치될지 (예: registry-ui, registry-block) 결정하는 중요한 역할을 합니다. 📍
dependencies 배열을 통해 외부 라이브러리를, registryDependencies 배열을 통해 동일 레지스트리 내 다른 컴포넌트(호스팅된 JSON URL 사용)를 자동으로 설치하도록 지정할 수 있습니다. 🔗
npx shadcn build 명령을 실행하면 컴포넌트 코드가 포함된 JSON 파일이 public/r 폴더에 생성되며, 이 파일을 웹에 호스팅하여 배포합니다. 🌐
- 사용자는
npx shadcn add [호스팅된_JSON_파일_URL] 명령 하나로 컴포넌트와 모든 의존성을 쉽게 설치할 수 있어 코드 배포가 간편해집니다. ✨
- 레지스트리 JSON 파일의 URL을 사용하여 V0.dev에서 컴포넌트를 직접 열고 AI를 활용하여 반복 작업 및 개선을 할 수 있는 보너스 기능도 제공합니다. 🤖
- 사용자 정의 CSS 및 변수를 포함하여 배포 가능한 테마를 생성하는 데 활용될 수 있으며, TweakCn과 같은 사이트에서 테마를 설치하는 데 사용됩니다. 🎨
데브허브 | DEVHUB | Shadcn CLI Makes Code Sharing Stupidly Simple