CLI

Use the CLI to add Plate UI components to your project.

init

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

The init command installs dependencies, configures tailwind.config.js, and CSS variables for the project.

npx shadcx@latest init plate

You will be asked a few questions to configure components.json:

Which color would you like to use as base color? › Slate
Do you want to use CSS variables for colors? › yes

Options

Usage: shadcx init [options] [registry]

initialize your project and install dependencies

Options:
  -d, --defaults    use default values i.e slate and css variables. (default: false)
  -f, --force       force overwrite of existing components.json. (default: false)
  -y, --yes         skip confirmation prompt. (default: false)
  -c, --cwd <cwd>   the working directory. defaults to the current directory.
  -a, --all         add all available components. (default: false)
  -n, --name <name> registry name. (default: plate)
  -s, --silent      mute output (default: false)
  --src-dir         use the src directory when creating a new project (default: false)
  --pm <pm>         package manager to use (npm, pnpm, yarn, bun)
  -h, --help        display help for command

add

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

# Using prefix syntax
npx shadcx@latest add plate/editor plate/toolbar
 
# Or mixed usage (registry will be from the first prefix found)
npx shadcx@latest add plate/editor toolbar
 
# Or using registry option
npx shadcx@latest add editor toolbar -r plate

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

Which components would you like to add? › Space to select. A to toggle all.
Enter to submit.

◯  align-dropdown-menu
◯  avatar
◯  blockquote-element
◯  button
◯  checkbox
◯  code-leaf
◯  code-line-element
◯  code-syntax-leaf
◯  combobox

Options

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

add a component to your project

Arguments:
  components         the components to add.

Options:
  -y, --yes         skip confirmation prompt. (default: false)
  -o, --overwrite   overwrite existing files. (default: false)
  -c, --cwd <cwd>   the working directory. defaults to the current directory.
  -p, --path <path> the path to add the component to.
  -a, --all         add all available components (default: false)
  -s, --silent      mute output (default: false)
  --src-dir         use the src directory when creating a new project (default: false)
  -r, --registry    registry name or url
  -l, --list        list all available registries (default: false)
  -h, --help        display help for command

Monorepo

In a monorepo, you can specify the path to your workspace with the -c or --cwd option.

npx shadcx@latest init plate -c ./apps/www

or

npx shadcx@latest add plate/editor -c ./apps/www

Example components.json

Here's an example components.json file configured for shadcn/ui and Plate UI:

{
  "$schema": "https://ui.shadcn.com/schema.json",
  "style": "default",
  "rsc": true,
  "tsx": true,
  "tailwind": {
    "baseColor": "slate",
    "config": "tailwind.config.ts",
    "css": "src/app/globals.css",
    "cssVariables": true,
    "prefix": ""
  },
  "aliases": {
    "components": "@/components",
    "hooks": "@/hooks",
    "lib": "@/lib",
    "ui": "@/components/ui",
    "utils": "@/lib/utils"
  },
  "iconLibrary": "lucide",
  "registries": {
    "plate": {
      "aliases": {
        "ui": "@/components/plate-ui"
      },
      "url": "https://platejs.org/r"
    }
  }
}