Next.js
Install and configure Next.js.
If you're using React 19, see the Next.js 15 + React 19 guide.
Quick Start
Choose your editor to get started. These commands will initialize your project and add the editor (browse available editors):
npx shadcx@latest add plate/editor-basicnpx shadcx@latest add plate/editor-aiThis will add a page in app/editor along with all necessary components in components/plate-ui as a starting point.
Manual Installation
If you prefer to set up your project step by step, follow these instructions:
Create project
Run the init command to create a new Next.js project or to setup an existing one:
npx shadcx@latest init plateConfigure components.json
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? › no / yesAdd components
You can now start adding components to your project.
npx shadcx@latest add -r plateThe command above will add the ParagraphElement component to your project.
Register components
To add more components to your plugins, see Plugin Components.
Add editor (optional)
Choose your editor to get started (browse available editors).
npx shadcx@latest add plate/editor-basicnpx shadcx@latest add plate/editor-aiThis will add an /editor page to your project along with all necessary components as a starting point.