Installation

How to setup Plate UI in your project.

This guide shows you many ways to install Plate UI. Pick the one that best fits your project:

AI-Assisted Installation: Context-aware setup with AI
Quick Start: Next.js
Installation: Manual or other frameworks

AI-Assisted Installation

Using an AI-powered IDE (like Cursor) that supports the Model Context Protocol (MCP) is the most streamlined way to build your editor with Plate (editor, plugins, and components) within the context of your project.

To get started with AI-assisted installation, see our MCP Server Setup guide.

Once your AI tool is configured with our MCP server, you can typically ask it directly to: "Set up a Plate editor with basic formatting" or "Add AI plugins to my editor".

Quick Start

Install Plate UI

Add Plate dependencies and styles:

pnpm dlx shadcn@canary add https://platejs.org/r/plate-ui

Not using Next.js? See the other installation guides

Add an editor

Choose an editor to get started. This will add an example page and all necessary components.

Minimal Editor:

pnpm dlx shadcn@canary add https://platejs.org/r/editor-basic

AI Editor:

pnpm dlx shadcn@canary add https://platejs.org/r/editor-ai

Add components

You can now start adding components to your project.

pnpm dlx shadcn@canary add https://platejs.org/r/toolbar

The command above will add the Toolbar component to your project. You can then import it like this:

import { Toolbar } from "@/components/ui/toolbar"
 
export default function Home() {
  return (
    <div>
      <Toolbar>...</Toolbar>
    </div>
  )
}

This is for regular components. Plate also allows you to customize any editor node (paragraph, blockquote, etc.) with plugin components.

Manual Installation

Install shadcn/ui

Pick an installation guide and follow the steps.

Add dependencies

Add the following dependencies to your project:

pnpm add @udecode/plate tailwind-scrollbar-hide

Configure Styles

Update your main CSS file (e.g., app/globals.css) to add the following plugins and CSS variables. You can customize these to match your design system.

/* ... your other plugins ... */
@plugin 'tailwind-scrollbar-hide';
 
:root {
  /* Colors */
  --brand: oklch(0.623 0.214 259.815);
  --highlight: oklch(0.852 0.199 91.936);
 
  /* (Optional) Fonts */
  --font-heading: 'var(--font-heading)', 'ui-sans-serif', '-apple-system', 'BlinkMacSystemFont', 'Segoe UI Variable Display', 'Segoe UI', 'Helvetica', 'Apple Color Emoji', 'Arial', 'sans-serif', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
  --font-mono: 'var(--font-mono)', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
  --font-sans: 'var(--font-sans)', 'ui-sans-serif', '-apple-system', 'BlinkMacSystemFont', 'Segoe UI Variable Display', 'Segoe UI', 'Helvetica', 'Apple Color Emoji', 'Arial', 'sans-serif', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
 
  /* ... your other existing :root variables ... */
}
 
.dark {
  /* Colors */
  --brand: oklch(0.707 0.165 254.624);
  --highlight: oklch(0.852 0.199 91.936); /* Note: highlight is the same for light/dark in the base 'plate' style */
 
  /* ... your other existing .dark variables ... */
}

The --font-... variables will work alongside or override your existing base font definitions from your shadcn/ui setup or your own typography configuration. You can keep your existing font definitions and just override the Plate UI colors.