Manual Installation

Add dependencies to your project manually.

Add Tailwind CSS

Components are styled using Tailwind CSS. You need to install Tailwind CSS in your project.

Follow the Tailwind CSS installation instructions to get started.

Add dependencies

Add the following dependencies to your project:

npm install @udecode/plate @udecode/cn class-variance-authority tailwindcss-animate tailwind-scrollbar-hide lucide-react

Configure path aliases

Configure the path aliases in your tsconfig.json file.

tsconfig.json
{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": ["./*"]
    }
  }
}

Configure tailwind.config.js

Configure styles

Configure components.json

Create a components.json in the root of your project.

{
  "$schema": "https://ui.shadcn.com/schema.json",
  "style": "default",
  "rsc": true,
  "tsx": true,
  "tailwind": {
    "baseColor": "slate",
    "config": "tailwind.config.ts",
    "css": "src/app/globals.css",
    "cssVariables": true,
    "prefix": ""
  },
  "aliases": {
    "components": "@/components",
    "hooks": "@/hooks",
    "lib": "@/lib",
    "ui": "@/components/ui",
    "utils": "@/lib/utils"
  },
  "iconLibrary": "lucide",
  "registries": {
    "plate": {
      "aliases": {
        "ui": "@/components/plate-ui"
      },
      "url": "https://platejs.org/r"
    }
  }
}

Adjust the values as needed.

That's it

You can now start adding components to your project:

npx shadcx@latest add -r plate

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 a page in app/editor along with all necessary components in components/plate-ui as a starting point.