11---
22title : CLI
3- description : Use the CLI to add components to your project.
3+ description : Use the CLI to add Plate UI components to your project.
44---
55
6- <Callout className = " mt-6"
7- WIP – We're migrating to <Link href = " https://ui.shadcn.com/docs/cli" Link >.
8- </Callout >
9-
10- { /* <Callout>
11-
12- **Note:** We are now using the `shadcn` CLI.
13-
14- </Callout>
15-
166## init
177
18- Use the `init` command to initialize configuration and dependencies for a new project.
8+ Use the ` init ` command to initialize configuration and dependencies for a new project with Plate UI .
199
2010The ` init ` command installs dependencies, adds the ` cn ` util, configures ` tailwind.config.js ` , and CSS variables for the project.
2111
2212``` bash
23- npx @udecode/plate-ui@latest init
13+ npx shadcx@latest init -u https://platejs.org/r -n plate-ui
14+ ```
15+
16+ If you also want to use <Link href = " https://ui.shadcn.com/" Link > in your project, you can use the following command:
17+
18+ ``` bash
19+ npx shadcx@latest init
20+ npx shadcx@latest init -u https://platejs.org/r -n plate-ui
2421```
2522
2623You will be asked a few questions to configure ` components.json ` :
2724
2825``` txt showLineNumbers
29- Which style would you like to use? › Default
3026Which color would you like to use as base color? › Slate
3127Do you want to use CSS variables for colors? › yes
3228```
3329
34- To have the same look than Plate UI, you should:
35-
36- - Pick "Default" for the style. Plate does not have the "New York" style.
37- - Pick "Slate" for the base color.
38- - Pick "Yes" for using CSS variables.
39-
40- You should get something like this:
41-
42- ```txt
43- npx shadcn@latest init
44- Need to install the following packages:
45- 46- Ok to proceed? (y) y
47-
48- ✔ Preflight checks.
49- ✔ Verifying framework. Found Next.js.
50- ✔ Validating Tailwind CSS.
51- ✔ Validating import alias.
52- ✔ Which style would you like to use? › Default
53- ✔ Which color would you like to use as the base color? › Slate
54- ✔ Would you like to use CSS variables for theming? … no / yes
55- ✔ Writing components.json.
56- ✔ Checking registry.
57- ✔ Updating tailwind.config.js
58- ✔ Updating src/styles/globals.css
59- ✔ Installing dependencies.
60- ✔ Created 1 file:
61- - src/lib/utils.ts
62-
63- Success! Project initialization completed.
64- You may now add components.
65- ```
66-
6730### Options
6831
6932``` txt
70- Usage: shadcn init [options] [components... ]
33+ Usage: shadcx init [options]
7134
7235initialize your project and install dependencies
7336
74- Arguments:
75- components the components to add or a url to the component.
76-
7737Options:
78- -d, --defaults use default values i.e new-york, zinc and css variables. (default: false)
38+ -d, --defaults use default values i.e slate and css variables. (default: false)
7939 -f, --force force overwrite of existing components.json. (default: false)
8040 -y, --yes skip confirmation prompt. (default: false)
8141 -c, --cwd <cwd> the working directory. defaults to the current directory.
82- -h, --help display help for command
42+ -u, --url <url> custom registry URL. (default: https://platejs.org/r)
43+ -n, --name <name> registry name. (default: plate-ui)
44+ -h, --help display help for command
8345```
8446
8547## add
8648
87- Use the `add` command to add components and dependencies to your project.
49+ Use the ` add ` command to add Plate UI components and dependencies to your project.
8850
8951``` bash
90- npx @udecode/plate-ui @latest add [component]
52+ npx shadcx @latest add [component]
9153```
9254
9355You will be presented with a list of components to choose from:
@@ -107,73 +69,63 @@ Enter to submit.
10769◯ combobox
10870```
10971
110- <Callout className="my-4">
111- Pick the components you want in our <Link href="/?builder=true" target="_blank">interactive builder</Link> to generate the bulk add command to run.
112- </Callout>
113-
11472### Options
11573
11674``` txt
117- Usage: @udecode/plate-ui add [options] [components...]
75+ Usage: shadcx add [options] [components...]
11876
11977add a component to your project
12078
12179Arguments:
122- components the components to add
80+ components the components to add.
12381
12482Options:
125- -y, --yes skip confirmation prompt. (default: false)
126- -o, --overwrite overwrite existing files. (default: false)
127- -c, --cwd <cwd> the working directory. defaults to the current directory.
128- -p, --path <path> the path to add the component to.
129- -h, --help display help for command
83+ -y, --yes skip confirmation prompt. (default: false)
84+ -o, --overwrite overwrite existing files. (default: false)
85+ -c, --cwd <cwd> the working directory. defaults to the current directory.
86+ -p, --path <path> the path to add the component to.
87+ -h, --help display help for command
13088```
13189
132- ## diff (experimental)
133-
134- You can use the diff command to check for updates against the registry.
90+ ## Monorepo
13591
136- Run the following command to get a list of components that have updates available:
92+ In a monorepo, you can specify the path to your workspace with the ` -c ` or ` --cwd ` option.
13793
13894``` bash
139- npx @udecode/ plate-ui@latest diff
95+ npx shadcx@latest init -u https://platejs.org/r -n plate-ui -c ./apps/www
14096```
14197
142- ```txt
143- The following components have updates available:
144- - blockquote-element
145- - /path/to/my-app/components/ui/blockquote-element.tsx
146- - button
147- - /path/to/my-app/components/ui/button.tsx
148- - combobox
149- - /path/to/my-app/components/ui/combobox.ts
150- ```
151-
152- Then run `diff [component]` to see the changes:
98+ or
15399
154100``` bash
155- npx @udecode/plate-ui@ latest diff blockquote-element
101+ npx shadcx@ latest add align-dropdown-menu -c ./apps/www
156102```
157103
158- ```diff /pl-6/
159- ref={ref}
160- - className={cn('my-1 border-l-2 pl-4 italic', className)}
161- + className={cn('my-1 border-l-2 pl-6 italic', className)}
162- {...props}
104+ ## Example components.json
105+
106+ Here's an example ` components.json ` file configured for <Link href = " https://ui.shadcn.com/" Link > and Plate UI:
107+
108+ ``` json
109+ {
110+ "style" : " default"
111+ "tailwind" : {
112+ "config" : " tailwind.config.js"
113+ "css" : " app/globals.css"
114+ "baseColor" : " slate"
115+ "cssVariables" : true
116+ },
117+ "aliases" : {
118+ "components" : " @/components"
119+ "utils" : " @/lib/utils"
120+ },
121+ "registries" : {
122+ "plate-ui" : {
123+ "url" : " https://platejs.org/r"
124+ "style" : " default"
125+ "aliases" : {
126+ "ui" : " @/components/plate-ui"
127+ }
128+ }
129+ }
130+ }
163131```
164-
165- ### Options
166-
167- ```txt
168- Usage: @udecode/plate-ui diff [options] [component]
169-
170- check for updates against the registry
171-
172- Arguments:
173- component the component name
174-
175- Options:
176- -y, --yes skip confirmation prompt. (default: false)
177- -c, --cwd <cwd> the working directory. defaults to the current directory.
178- -h, --help display help for command
179- ``` */ }
0 commit comments