Components
CLI

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, adds the cn util, configures tailwind.config.js, and CSS variables for the project.

npx shadcx@latest init -u https://platejs.org/r -n plate-ui

If you also want to use shadcn/ui in your project, you can use the following command:

npx shadcx@latest init
npx shadcx@latest init -u https://platejs.org/r -n plate-ui

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]

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.
  -u, --url <url>   custom registry URL. (default: https://platejs.org/r)
  -n, --name <name> registry name. (default: plate-ui)
  -h, --help        display help for command

add

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

npx shadcx@latest add [component]

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.
  -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 -u https://platejs.org/r -n plate-ui -c ./apps/www

or

npx shadcx@latest add align-dropdown-menu -c ./apps/www

Example components.json

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

{
  "style": "default",
  "tailwind": {
    "config": "tailwind.config.js",
    "css": "app/globals.css",
    "baseColor": "slate",
    "cssVariables": true
  },
  "aliases": {
    "components": "@/components",
    "utils": "@/lib/utils"
  },
  "registries": {
    "plate-ui": {
      "url": "https://platejs.org/r",
      "style": "default",
      "aliases": {
        "ui": "@/components/plate-ui"
      }
    }
  }
}