Components
CLI

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.js, and CSS variables for the project.

npx @udecode/plate-ui@latest init

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

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

To have the same look than Plate UI, you should:

  • Pick "Default" for the style. Plate does not have the "New York" style.
  • Pick "Slate" for the base color.
  • Pick "Yes" for using CSS variables.

You should get something like this:

npx shadcn@latest init
Need to install the following packages:
shadcn@2.0.7
Ok to proceed? (y) y

✔ Preflight checks.
✔ Verifying framework. Found Next.js.
✔ Validating Tailwind CSS.
✔ Validating import alias.
✔ Which style would you like to use? › Default
✔ Which color would you like to use as the base color? › Slate
✔ Would you like to use CSS variables for theming? … no / yes
✔ Writing components.json.
✔ Checking registry.
✔ Updating tailwind.config.js
✔ Updating src/styles/globals.css
✔ Installing dependencies.
✔ Created 1 file:
  - src/lib/utils.ts

Success! Project initialization completed.
You may now add components.

Options

Usage: shadcn init [options] [components...]

initialize your project and install dependencies

Arguments:
  components         the components to add or a url to the component.

Options:
  -d, --defaults    use default values i.e new-york, zinc 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.
  -h, --help       display help for command

add

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

npx @udecode/plate-ui@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: @udecode/plate-ui 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

diff (experimental)

You can use the diff command to check for updates against the registry.

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

npx @udecode/plate-ui@latest diff
The following components have updates available:
- blockquote-element
  - /path/to/my-app/components/ui/blockquote-element.tsx
- button
  - /path/to/my-app/components/ui/button.tsx
- combobox
  - /path/to/my-app/components/ui/combobox.ts

Then run diff [component] to see the changes:

npx @udecode/plate-ui@latest diff blockquote-element
      ref={ref}
    - className={cn('my-1 border-l-2 pl-4 italic', className)}
    + className={cn('my-1 border-l-2 pl-6 italic', className)}
      {...props}

Options

Usage: @udecode/plate-ui diff [options] [component]

check for updates against the registry

Arguments:
  component        the component name

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