Components
Next.js

Next.js

Install and configure Next.js.

Quick Start

Choose your editor to get started. These commands will initialize your project and add the editor (browse available editors):

Minimal Editor

npx shadcx@latest add plate/editor-basic

AI Editor

npx shadcx@latest add plate/editor-ai

This 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 plate

Configure 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 / yes

Add components

You can now start adding components to your project.

npx shadcx@latest add -r plate

The 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).

Minimal Editor

npx shadcx@latest add plate/editor-basic

AI Editor

npx shadcx@latest add plate/editor-ai

This will add an /editor page to your project along with all necessary components as a starting point.