CLI - shadcn-solid 한국어

문서

CLI

CLI를 사용하여 프로젝트에 컴포넌트를 추가하세요.

init

init 명령어를 사용하여 새 프로젝트의 구성 및 종속성을 초기화하세요.

init 명령어는 종속성을 설치하고, cn 유틸리티를 추가하며, tailwind.config.cjs와 프로젝트의 CSS 변수를 설정합니다.

npx shadcn-solid@latest init

components.json을 구성하기 위한 몇 가지 질문을 받게 됩니다.

◆  Which CSS framework would you like to use?
│  ● TailwindCSS
│  ○ UnoCSS
│
◇  Which color would you like to use as base color?
│  Slate
│
◇  Where is your global CSS file?
│  src/app.css
│
◇  Would you like to use CSS variables for colors?
│  Yes
│
◇  Are you using a custom tailwind prefix eg. tw-? (Leave blank if not)
│
│
◇  Where is your tailwind.config.cjs located?
│  tailwind.config.cjs
│
◇  Configure the import alias for components:
│  @/components
│
◇  Configure the import alias for utils:
│  @/libs/cn

옵션

Usage: shadcn-solid init [options]
 
initialize and install dependencies
 
Options:
  -c, --cwd <path>  the working directory (default: "path\to\my-app")
  -h, --help        display help for command

add

add 명령어를 사용하여 프로젝트에 컴포넌트와 종속성을 추가하세요.

npx shadcn-solid@latest add [component]

선택할 수 있는 컴포넌트 목록이 표시됩니다.

◆  Which components would you like to add?
│  ◻ accordion (Space to select. A to toggle all. Enter to submit.)
│  ◻ alert
│  ◻ alert-dialog
│  ◻ badge
│  ◻ button
│  ◻ card
│  ◻ checkbox
│  ◻ collapsible
│  ◻ combobox
│  ◻ context-menu
│  ◻ dialog
│  ◻ dropdown-menu
│  ◻ hover-card
│  ◻ image
│  ◻ popover
│  ◻ progress
│  ◻ radio-group
│  ◻ select
│  ◻ separator
│  ◻ sheet
│  ◻ skeleton
│  ◻ switch
│  ◻ table
│  ◻ tabs
│  ◻ textfield
│  ◻ textarea
│  ◻ toast
│  ◻ toggle
│  ◻ tooltip

옵션

Usage: shadcn-solid add [components...] [options]
 
add components to your project
 
Arguments:
  components        the components to add
 
Options:
  -o, --overwrite   overwrite existing file (default: false)
  -c, --cwd <path>  the working directory (default: "path\to\my-app")
  -a, --all         install all components (default: false)
  -h, --help        display help for command

`diff`

diff를 사용하여 업스트림 컴포넌트 업데이트를 추적하세요.

diff 명령어를 실행하여 업데이트가 있는 컴포넌트 목록을 확인하세요.

npx shadcn-solid@latest diff

┌   shadcn-solid
│
◇  The following components have updates avaiable
│
●  alert - path\to\my-ap\components\ui\alert.tsx
│
●  card - path\to\my-ap\components\ui\card.tsx
│
└  Run diff <component> to see the changes

그런 다음 diff [component]를 실행하여 변경 사항을 확인하세요.

npx shadcn-solid@latest diff alert

const alertVariants = cva(
- "relative w-full rounded-lg border",
+ "relative w-full pl-12 rounded-lg border"
)

옵션

Usage: shadcn-solid diff [component] [options]
 
check for updates agaist the registry
 
Arguments:
  component         the component name
 
Options:
  -c, --cwd <path>  the working directory (default: "path\to\my-app")
  -h, --help        display help for command

다크 모드 Figma