components.json

components.json 파일은 프로젝트에 대한 설정을 담고 있습니다.

이 파일을 사용하여 프로젝트가 어떻게 설정되어 있는지 파악하고, 프로젝트에 맞게 커스터마이징된 컴포넌트를 생성합니다.

참고: components.json 파일은 선택 사항이며, CLI를 사용하여 프로젝트에 컴포넌트를 추가하는 경우에만 필요합니다. 복사-붙여넣기 방식으로 컴포넌트를 사용하신다면 이 파일은 필요하지 않습니다.

다음 명령어를 실행하여 프로젝트에 components.json 파일을 생성할 수 있습니다.

npx shadcn-solid@latest init

더 자세한 정보는 CLI 섹션을 참조하세요.

$schema

components.json에 대한 JSON 스키마는 여기에서 확인할 수 있습니다.

{
  "$schema": "https:/shadcn-solid.com/schema.json"
}

tailwind

CLI가 프로젝트에서 Tailwind CSS가 어떻게 설정되어 있는지 파악하는 데 도움이 되는 설정입니다.

Tailwind CSS 설정 방법은 (installation section)[/docs/installation]을 참조하세요.

tailwind.config

tailwind.config.js 파일이 위치한 경로입니다.

{
  "tailwind": {
    "config": "tailwind.config.js" | "tailwind.config.ts"
  }
}

tailwind.css.path

프로젝트에 Tailwind CSS를 가져오는 CSS 파일의 경로입니다.

{
  "tailwind": {
    "css": {
      "path": "src/app.css"
    }
  }
}

tailwind.color

컴포넌트의 기본 색상 팔레트를 생성하는 데 사용됩니다. 초기화 후에는 변경할 수 없습니다.

{
  "tailwind": {
    "color": "gray" | "neutral" | "slate" | "stone" | "zinc"
  }
}

tailwind.css.variable

테마 적용을 위해 CSS 변수 또는 Tailwind CSS 유틸리티 클래스 중 하나를 선택할 수 있습니다.

유틸리티 클래스를 사용하여 테마를 적용하려면 tailwind.cssVariables를 false로 설정하세요. CSS 변수를 사용하려면 tailwind.cssVariables를 true로 설정하세요.

{
  "tailwind": {
    "css": {
      "variabe": `true` | `false`
    }
  }
}

더 자세한 정보는 (theming docs)[/docs/theming]를 참조하세요.

이 설정은 초기화 후 변경할 수 없습니다. CSS 변수와 유틸리티 클래스 간에 전환하려면 컴포넌트를 삭제하고 다시 설치해야 합니다.

tailwind.prefix

Tailwind CSS 유틸리티 클래스에 사용할 접두사입니다. 컴포넌트는 이 접두사와 함께 추가됩니다.

{
  "tailwind": {
    "prefix": "tw-"
  }
}

uno

CLI가 프로젝트에서 Uno CSS가 어떻게 설정되어 있는지 파악하는 데 도움이 되는 설정입니다.

Uno CSS 설정 방법은 설치 섹션을 참조하세요.

uno.config

uno.config.ts 파일이 위치한 경로입니다.

{
  "uno": {
    "config": "uno.config.ts"
  }
}

uno.css.path

프로젝트에 Uno CSS를 가져오는 CSS 파일의 경로입니다.

{
  "uno": {
    "css": {
      "path": "src/app.css"
    }
  }
}

uno.color

컴포넌트의 기본 색상 팔레트를 생성하는 데 사용됩니다. 초기화 후에는 변경할 수 없습니다.

{
  "uno": {
    "color": "gray" | "neutral" | "slate" | "stone" | "zinc"
  }
}

uno.css.variable

테마 적용을 위해 CSS 변수 또는 Uno CSS 유틸리티 클래스 중 하나를 선택할 수 있습니다.

유틸리티 클래스를 사용하여 테마를 적용하려면 uno.cssVariables를 false로 설정하세요. CSS 변수를 사용하려면 uno.cssVariables를 true로 설정하세요.

{
  "uno": {
    "css": {
      "variabe": `true` | `false`
    }
  }
}

더 자세한 정보는 테마 문서를 참조하세요.

이 설정은 초기화 후 변경할 수 없습니다. CSS 변수와 유틸리티 클래스 간에 전환하려면 컴포넌트를 삭제하고 다시 설치해야 합니다.

uno.prefix

Uno CSS 유틸리티 클래스에 사용할 접두사입니다. 컴포넌트는 이 접두사와 함께 추가됩니다.

{
  "uno": {
    "prefix": "uno-"
  }
}

alias

CLI는 이 값들과 tsconfig.json 또는 jsconfig.json 파일의 paths 설정을 사용하여 생성된 컴포넌트를 올바른 위치에 배치합니다.

경로 별칭(Path alias)은 tsconfig.json 또는 jsconfig.json 파일에 설정되어 있어야 합니다.

중요: src 디렉토리를 사용하는 경우, tsconfig.json 또는 jsconfig.json 파일의 paths 아래에 포함되어 있는지 확인하세요.

alias.cn

유틸리티 함수를 위한 import 별칭입니다.

{
  "aliases": {
    "cn": "@/lib/utils"
  }
}

alias.component

컴포넌트를 위한 import 별칭입니다.

{
  "alias": {
    "component": "@/components"
  }
}

alias.ui

ui 컴포넌트를 위한 import 별칭입니다.

CLI는 aliases.ui 값을 사용하여 ui 컴포넌트를 어디에 배치할지 결정합니다. ui 컴포넌트의 설치 디렉토리를 커스터마이징하고 싶다면 이 설정을 사용하세요.

{
  "alias": {
    "ui": "@/ui"
  }
}