Github - shadcn-solid 组件库
文档
CLI

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
Previous page - shadcn-solid 组件库 深色模式 Figma Next page - shadcn-solid 组件库