shadcn-solid

Docs

CLI

Use the CLI to add components to your project.

init

Use the init command to initialize configuration and dependencies for a new project.

The init command installs dependencies, adds the cn util, configures tailwind.config.cjs, and CSS variables for the project.

npx shadcn-solid@latest init

You will be asked a few questions to configure 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

Options

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

Use the add command to add components and dependencies to your project.

npx shadcn-solid@latest add [component]

You will be presented with a list of components to choose from:

◆  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

Options

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

Track upstream component updates with diff.

Run the diff command to get a list of components that have updates available:

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

Then run diff [component] to see the changes:

npx shadcn-solid@latest diff alert

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

Options

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

Dark mode Figma