CLI
Use the CLI to add components to your project.
Note: We are now using the shadcn
CLI.
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
Pick the components you want in our interactive builder to generate the bulk add command to run.
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