CLI

@seed-design/cli 패키지를 사용하여 seed-design을 더 쉽게 사용할 수 있어요.

init

seed-design.json 파일을 생성하기 위한 명령어에요.

init 명령어 입력하기

npx @seed-design/cli@latest init

pnpm dlx @seed-design/cli@latest init

yarn dlx @seed-design/cli@latest init

bun x @seed-design/cli@latest init

seed-design 설정

◇  TypeScript를 사용중이신가요?
│  Yes
│
◇  React Server Components를 사용중이신가요?
│  No
│
◇  seed-design 폴더 경로를 입력해주세요. (기본값은 프로젝트 루트에 생성됩니다.)
│  ./seed-design

아래 파일을 프로젝트 루트에 생성해주세요.

seed-design.json

{
  "rsc": false,
  "tsx": true,
  "path": "./seed-design"
}

옵션들

Usage:
  $ seed-design init

Options:
  -c, --cwd <cwd>  작업 디렉토리. 기본값은 현재 디렉토리.
  -y, --yes        모든 질문에 대해 기본값으로 답변합니다. 
  -h, --help       Display this message

add

컴포넌트를 추가하기 위한 명령어에요.

npx @seed-design/cli@latest add [...components]

pnpm dlx @seed-design/cli@latest add [...components]

yarn dlx @seed-design/cli@latest add [...components]

bun x @seed-design/cli@latest add [...components]

컴포넌트를 입력하지 않고 명령어를 입력하게 되면 받을 수 있는 모든 컴포넌트를 볼 수 있어요.

npx @seed-design/cli@latest add

pnpm dlx @seed-design/cli@latest add

yarn dlx @seed-design/cli@latest add

bun x @seed-design/cli@latest add

◆  Select all components to add
│  ◻ action-button
│  ◻ alert-dialog
│  ◻ tabs
│  ◻ callout
│  ◻ switch
│  ◻ checkbox
│  ◻ text-field
│  ◻ ...
└

혹은 여러 컴포넌트를 입력해서 추가할 수도 있어요.

npx @seed-design/cli@latest add action-button alert-dialog

pnpm dlx @seed-design/cli@latest add action-button alert-dialog

yarn dlx @seed-design/cli@latest add action-button alert-dialog

bun x @seed-design/cli@latest add action-button alert-dialog

옵션들

Usage:
  $ seed-design add [...components]

Options:
  -a, --all        Add all components (default: false)
  -c, --cwd <cwd>  the working directory. defaults to the current directory.
  -h, --help       Display this message 

Examples:
seed-design add action-button
seed-design add alert-dialog

CLI

init

init 명령어 입력하기

seed-design 설정

옵션들

add

옵션들

On this page