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