시작하기

registry.json 파일 추가

프로젝트 루트에 registry.json 파일을 만들어요. 프로젝트는 Next.js, Remix, Vite, 그 외 React를 지원하는 어떤 프로젝트든 상관없어요.

{
  "$schema": "https://ui.shadcn.com/schema/registry.json",
  "name": "acme",
  "homepage": "https://acme.com",
  "items": [
    // ...
  ]
}

이 registry.json 파일은 registry 스키마 명세를 따라야 해요.

컴포넌트 만들기

첫 번째 컴포넌트를 추가해요. 간단한 <HelloWorld /> 컴포넌트의 예시예요.

import { Button } from "@/components/ui/button"

export function HelloWorld() {
  return <Button>Hello World</Button>
}

참고: 이 예시에서는 컴포넌트를 registry 디렉터리에 둡니다. registry.json 파일에 올바른 경로만 설정하면 프로젝트 어디에든 배치할 수 있어요.

registry
└── hello-world
    └── hello-world.tsx

중요: 컴포넌트를 커스텀 디렉터리에 배치한다면 tailwind.config.ts 파일에 해당 경로가 설정되어 있는지 확인하세요.

// tailwind.config.ts
export default {
  content: ["./registry/**/*.{js,ts,jsx,tsx}"],
}

레지스트리에 컴포넌트 추가

컴포넌트를 레지스트리에 추가하려면 컴포넌트 정의를 registry.json에 추가해야 해요.

{
  "$schema": "https://ui.shadcn.com/schema/registry.json",
  "name": "acme",
  "homepage": "https://acme.com",
  "items": [
    {
      "name": "hello-world",
      "type": "registry:block",
      "title": "Hello World",
      "description": "A simple hello world component.",
      "files": [
        {
          "path": "registry/hello-world/hello-world.tsx",
          "type": "registry:component"
        }
      ]
    }
  ]
}

레지스트리 아이템은 name, type, title, description, files를 추가해 정의해요. 파일마다 path와 type을 반드시 지정해야 해요. path는 프로젝트 루트 기준 상대 경로이고, type은 파일의 유형이에요.

레지스트리 아이템 스키마와 파일 유형에 대해 더 자세히 알고 싶다면 registry item 스키마 문서를 읽어보세요.

shadcn CLI 설치

참고로 build 명령어는 현재 shadcn@canary 버전의 CLI에서만 사용할 수 있어요.

npm install shadcn@canary

build 스크립트 추가

package.json 파일에 registry:build 스크립트를 추가해요.

{
  "scripts": {
    "registry:build": "shadcn build"
  }
}

build 스크립트 실행

build 스크립트를 실행해 레지스트리 JSON 파일을 생성해요.

npm run registry:build

참고: 기본적으로 build 스크립트는 레지스트리 JSON 파일을 public/r 아래에 생성해요. 예를 들어 public/r/hello-world.json 같은 형태입니다. --output 옵션으로 출력 디렉터리를 바꿀 수 있어요. 자세한 내용은 shadcn build 명령어를 참고하세요.