手动安装

手动将依赖项添加到您的项目中。

添加 Tailwind CSS

组件使用 Tailwind CSS 进行样式设计。您需要在项目中安装 Tailwind CSS。

按照 Tailwind CSS 安装说明开始使用。

添加依赖项

Add the following dependencies to your project:

npm install slate slate-dom slate-react slate-history slate-hyperscript @udecode/plate-common @udecode/cn class-variance-authority tailwindcss-animate tailwind-scrollbar-hide lucide-react

Configure path aliases

在您的 tsconfig.json 文件中配置路径别名。

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

Configure tailwind.config.js

Configure styles

Configure components.json

在项目根目录中创建一个 components.json 文件。

{
  "$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"
    }
  }
}

根据需要调整这些值。

完成

您现在可以开始向您的项目添加组件：

npx shadcx@latest add -r plate

添加编辑器（可选）

选择一个编辑器开始使用（浏览可用的编辑器）。

最小编辑器

npx shadcx@latest add plate/editor-basic

AI编辑器

npx shadcx@latest add plate/editor-ai

这将在 app/editor 中添加一个页面，并在 components/plate-ui 中添加所有必要的组件作为起点。