Docs
CLI

CLI

Use the CLI to add components and manage registries in your project.

Overview

The shadxn CLI streamlines the process of adding components and managing dependencies within your project. It offers commands for initializing projects, adding components, checking for updates, and managing component registries.

init

Initialize your project and set up dependencies with the init command. This command configures your project with essential files and settings, including tailwind.config.js, global CSS, and components.json.

npx shadxn@latest init

During initialization, you'll answer configuration prompts to tailor your project setup:

Would you like to use TypeScript (recommended)? [no/yes]
Which style would you like to use? › [Default/New-York]
Which color would you like to use as a base color? › [Slate/...]
Where is your global CSS file located? › [app/globals.css]
Do you want to use CSS variables for colors? › [no/yes]
Where is your tailwind.config.js located? › [tailwind.config.js]
Configure the import alias for components: › [@/components]
Configure the import alias for utilities: › [@/lib/utils]
Are you using React Server Components? › [no/yes]

Options for init

Usage: shadxn init [options]

Options:
  -y, --yes        Skip confirmation prompt (default: false)
  -c, --cwd <cwd>  Specify the working directory (defaults to the current directory)
  -h, --help       Display help for the command

add

Add components from a specified registry to your project. The add command allows for the flexible integration of UI components, examples, or other types specified during the command execution.

npx shadxn@latest add [components...]

When adding components, you can specify the type, registry, and destination path:

Options for add

Usage: shadxn add [options] [components...]

Options:
  -y, --yes                  Skip confirmation prompt (default: true)
  -o, --overwrite            Overwrite existing files (default: false)
  -r, --registry <registry>  Specify the registry to use
  -c, --cwd <cwd>            Set the working directory (default: "/path/to/project")
  -a, --all                  Add all available components (default: false)
  -p, --path <path>          Set the path to add the component to
  -t, --type <type>          Define the type of component to add (default: "ui")
  -h, --help                 Display help for the command

registry

Manage component registries for your project. This set of commands lets you initialize, build, and add custom registries, enhancing your project with a broad range of component sources.

Subcommands for registry

  • init: Initialize the registry for a project.
  • build: Build the registry for deployment.
  • add: Activate a registry by adding it to your project.

Examples

Initialize a registry:

npx shadxn registry init -r shadcn

Add a custom registry:

npx shadxn registry add custom-registry-name

Options for registry commands

Each registry subcommand has its own set of options, typically including -h, --help to display command-specific help.

diff (Experimental)

Check for updates against the specified registry with the diff command. This helps ensure your components are up-to-date with the latest versions.

npx shadxn diff [component]

Options for diff

Usage: shadxn diff [options] [component]

Options:
  -y, --yes        Skip confirmation prompt (default: false)
  -c, --cwd <cwd>  Set the working directory (default: "/path/to/project")
  -h, --help       Display help for the command

This documentation provides a comprehensive guide to using the shadxn CLI for project setup, component management, and registry operations, ensuring a smooth development process.

components.jsonWhat is a Registry?