Editor UI renders incorrectly after successful compile in React 19 environment

[bhamichi]

Description

I’m new to Plate and have just purchased Plate Plus.

I followed the installation procedure from the official docs: https://pro.platejs.org/docs/installation.
During setup, I encountered several compatibility issues with packages requiring React 18, while my project was using React 19. I forced installation using --legacy-peer-deps to keep React 19.

After resolving all compile-time errors and successfully starting the Next.js development server, the /editor page renders, but the editor layout/UI is not displayed properly. (See attached screenshot and package.json.)

Reproduction URL

No response

Reproduction steps

Steps to reproduce:
1. Start a Next.js 15 project with React 19.1.0.
2. Install Plate Pro following installation docs.
3. Resolve peer dependency conflicts by forcing install (--legacy-peer-deps) instead of downgrading to React 18.
4. Run npm run dev and open http://localhost:3000/editor.

Plate version

49.2.9

Slate React version

0.117.1

Screenshots

Logs

Browsers

No response

[dosubot[bot]]

Hi @bhamichi! I'm Dosu and I’m helping the plate team.

Plate 49.x supports React 19, but there are a few common reasons for UI/layout issues in this setup:

• Plate now requires you to use React.forwardRef in custom UI components (like toolbars, buttons, floating elements). If you see errors about refs or toolbars rendering at -9999px or not at all, check that all relevant components use React.forwardRef as described in the migration notes.
• Plate 49.x migrated to shadcn/ui v4 and Tailwind v4. Make sure your project has Tailwind v4 and the original shadcn/ui primitives set up, and that styles are loading correctly. Missing or broken styles are a common cause of layout issues after upgrading or forcing installs. See the changelog for details.
• Plate 49.0.0 introduced breaking changes: plugins and initialValue must be passed to Plate, not PlateContent, and PlateContent must be rendered inside Plate. Incorrect usage can cause the editor to render blank or with broken layout. See the migration guide for updated usage.
• Forcing install with --legacy-peer-deps can sometimes result in mismatched or incompatible versions, which may cause subtle runtime issues even if the app compiles.

If you’re seeing missing styles, double-check your Tailwind and shadcn/ui integration. If toolbars or floating UI are broken, check for React.forwardRef usage in your custom components. If you’re using Plate/PlateContent incorrectly, update your usage to match the latest docs.

If you still have issues, try creating a minimal reproduction with just Plate, React 19, and Next.js 15, then add dependencies one by one to isolate the problem.

References:

• React 19/forwardRef issues
• Changelog: React 19, shadcn/ui, Tailwind v4
• Migration guide

To reply, just mention @dosu.

---

^{How did I do? Good | Irrelevant | Incorrect | Verbose | Hallucination | Report 🐛 | Other}    

[bhamichi]

Hello,

Thanks for this quick reply !

Could you please review my package.json below and let me know if you see any version mismatches or incompatibilities that might cause this?

{
  "name": "starter-next-multilang",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "start2": "next start -p 3041",
    "lint": "next lint",
    "format": "biome format --write",
    "prettier": "prettier --write .",
    "prepare": "husky"
  },
  "dependencies": {
    "@ai-sdk/react": "^2.0.8",
    "@ariakit/react": "0.4.7",
    "@dnd-kit/core": "^6.3.1",
    "@dnd-kit/modifiers": "^9.0.0",
    "@dnd-kit/sortable": "^10.0.0",
    "@dnd-kit/utilities": "^3.2.2",
    "@emoji-mart/data": "1.2.1",
    "@faker-js/faker": "^9.9.0",
    "@hookform/resolvers": "^5.1.1",
    "@lexical/code": "^0.32.1",
    "@lexical/link": "^0.32.1",
    "@lexical/list": "^0.32.1",
    "@lexical/markdown": "^0.32.1",
    "@lexical/react": "^0.32.1",
    "@lexical/rich-text": "^0.32.1",
    "@lexical/selection": "^0.32.1",
    "@lexical/table": "^0.32.1",
    "@lexical/utils": "^0.32.1",
    "@platejs/ai": "^49.2.4",
    "@platejs/autoformat": "^49.0.0",
    "@platejs/basic-nodes": "^49.0.0",
    "@platejs/basic-styles": "^49.0.0",
    "@platejs/callout": "^49.0.0",
    "@platejs/caption": "^49.0.0",
    "@platejs/code-block": "^49.0.0",
    "@platejs/combobox": "^49.0.0",
    "@platejs/comment": "^49.0.0",
    "@platejs/date": "^49.0.2",
    "@platejs/dnd": "^49.2.10",
    "@platejs/docx": "^49.0.0",
    "@platejs/emoji": "^49.0.0",
    "@platejs/floating": "^49.0.0",
    "@platejs/indent": "^49.0.0",
    "@platejs/juice": "^49.0.0",
    "@platejs/layout": "^49.2.1",
    "@platejs/link": "^49.1.1",
    "@platejs/list": "^49.2.0",
    "@platejs/markdown": "^49.2.1",
    "@platejs/math": "^49.0.0",
    "@platejs/media": "^49.0.0",
    "@platejs/mention": "^49.0.0",
    "@platejs/resizable": "^49.0.0",
    "@platejs/selection": "^49.2.4",
    "@platejs/slash-command": "^49.0.0",
    "@platejs/suggestion": "^49.0.0",
    "@platejs/table": "^49.1.13",
    "@platejs/test-utils": "^49.2.4",
    "@platejs/toc": "^49.0.0",
    "@platejs/toggle": "^49.0.0",
    "@radix-ui/react-accordion": "^1.2.3",
    "@radix-ui/react-avatar": "^1.1.10",
    "@radix-ui/react-checkbox": "^1.1.3",
    "@radix-ui/react-collapsible": "^1.1.2",
    "@radix-ui/react-context-menu": "^2.2.15",
    "@radix-ui/react-dialog": "^1.1.14",
    "@radix-ui/react-dropdown-menu": "^2.1.15",
    "@radix-ui/react-hover-card": "^1.1.7",
    "@radix-ui/react-label": "^2.1.7",
    "@radix-ui/react-popover": "^1.1.14",
    "@radix-ui/react-radio-group": "^1.3.7",
    "@radix-ui/react-scroll-area": "^1.2.4",
    "@radix-ui/react-select": "^2.2.5",
    "@radix-ui/react-separator": "^1.1.7",
    "@radix-ui/react-slider": "^1.3.5",
    "@radix-ui/react-slot": "^1.2.3",
    "@radix-ui/react-switch": "^1.1.4",
    "@radix-ui/react-tabs": "^1.1.12",
    "@radix-ui/react-toggle": "^1.1.9",
    "@radix-ui/react-toggle-group": "^1.1.10",
    "@radix-ui/react-toolbar": "^1.1.10",
    "@radix-ui/react-tooltip": "^1.2.7",
    "@tailwindcss/postcss": "^4.1.8",
    "@tanstack/react-query": "^5.76.1",
    "@tanstack/react-query-devtools": "^5.83.0",
    "@tanstack/react-table": "^8.20.6",
    "@udecode/cn": "^49.0.15",
    "@uploadthing/react": "7.1.0",
    "axios": "^1.7.9",
    "class-variance-authority": "^0.7.1",
    "clsx": "^2.1.1",
    "cmdk": "^1.1.1",
    "date-fns": "^4.1.0",
    "input-otp": "^1.4.2",
    "jotai-x": "^2.3.3",
    "katex": "^0.16.22",
    "lexical": "^0.32.1",
    "lodash-es": "^4.17.21",
    "lowlight": "^3.3.0",
    "lucide-react": "^0.474.0",
    "next": "^15.3.2",
    "next-auth": "^4.24.11",
    "next-intl": "^3.26.3",
    "next-themes": "^0.4.6",
    "platejs": "^49.2.9",
    "prettier-plugin-tailwindcss": "^0.6.11",
    "react": "^19.0.0",
    "react-colorful": "^5.6.1",
    "react-day-picker": "^8.10.1",
    "react-dnd": "^16.0.1",
    "react-dnd-html5-backend": "^16.0.1",
    "react-dom": "^19.0.0",
    "react-error-boundary": "^6.0.0",
    "react-hook-form": "^7.57.0",
    "react-icons": "^5.4.0",
    "react-lazy-load-image-component": "^1.6.3",
    "react-lite-youtube-embed": "^2.5.3",
    "react-markdown": "^10.1.0",
    "react-player": "^3.3.1",
    "react-tweet": "^3.2.2",
    "remark-gfm": "^4.0.1",
    "remark-math": "^6.0.0",
    "sonner": "^2.0.3",
    "tailwind-merge": "^2.6.0",
    "tailwindcss-animate": "^1.0.7",
    "uploadthing": "7.2.0",
    "use-file-picker": "^2.1.4",
    "use-stick-to-bottom": "^1.1.1",
    "vaul": "^1.1.2",
    "zod": "^3.25.76",
    "zustand": "^5.0.3"
  },
  "devDependencies": {
    "@biomejs/biome": "1.9.4",
    "@types/lodash-es": "^4.17.12",
    "@types/node": "^22.10.10",
    "@types/react": "^19",
    "@types/react-dom": "^19",
    "husky": "^9.0.11",
    "lint-staged": "^15.2.2",
    "postcss": "^8.5.4",
    "prettier": "^3.2.5",
    "tailwindcss": "^4.1.8",
    "tw-animate-css": "^1.3.4",
    "typescript": "^5"
  },
  "lint-staged": {
    "**/*": "prettier --write --ignore-unknown"
  }
}

[dosubot[bot]]

You have a mix of Plate plugin versions—many are at 49.0.x or 49.1.x, but the latest Plate core and plugins require all @platejs/* and platejs packages to be at least 49.2.4+ for full compatibility. This version mismatch can cause subtle UI/layout issues, especially with React 19, even if everything compiles.

Upgrade all Plate-related packages (platejs and every @platejs/*) to 49.2.9 or higher to match your core version and peer dependency requirements (source).

Also, double-check that you have shadcn/ui v4 primitives and Tailwind v4 set up as described in the Plate UI docs (source).

If you see runtime errors about Slate or slate-react, check for multiple versions in your dependency tree and use package.json overrides to force a single version (source).

For future installs or upgrades, using the shadcn CLI or Plate feature kits helps keep everything aligned and avoids these version mismatches.

To reply, just mention @dosu.

---

^{How did I do? Good | Irrelevant | Incorrect | Verbose | Hallucination | Report 🐛 | Other}    

[bhamichi]

Why does this command (from the official documentation https://pro.platejs.org/docs/installation) require me to downgrade my React version to 18?

PS D:\myproject\frontend-tenants> npm install @platejs/basic-nodes @platejs/callout @platejs/emoji @radix-ui/react-slot @radix-ui/react-tooltip @radix-ui/react-popover @platejs/code-block lowlight @platejs/selection @platejs/ai @platejs/caption @platejs/comment @platejs/basic-styles @platejs/media @radix-ui/react-toolbar @radix-ui/react-separator @radix-ui/react-dropdown-menu @platejs/list @platejs/toggle @platejs/date @platejs/toc @platejs/layout @platejs/link @platejs/math @platejs/table @ariakit/[email protected] @radix-ui/react-dialog cmdk jotai-x vaul @platejs/resizable [email protected] @platejs/indent react-lazy-load-image-component react-lite-youtube-embed react-player @platejs/mention @platejs/suggestion @platejs/markdown remark-gfm remark-math @platejs/dnd @ai-sdk/react @faker-js/faker @platejs/autoformat date-fns @radix-ui/react-avatar react-markdown @radix-ui/react-hover-card react-dnd react-dnd-html5-backend @platejs/docx @platejs/juice @emoji-mart/[email protected] @platejs/combobox @platejs/floating react-tweet use-file-picker [email protected] @uploadthing/[email protected] sonner zod @radix-ui/react-tabs @platejs/slash-command
npm error code ERESOLVE
npm error ERESOLVE unable to resolve dependency tree
npm error
npm error While resolving: [email protected]
npm error Found: [email protected]
npm error node_modules/react
npm error react@"^19.0.0" from the root project
npm error
npm error Could not resolve dependency:
npm error peer react@"^16.8.0 || ^17.0.0 || ^18.0.0" from [email protected]
npm error node_modules/react-day-picker
npm error react-day-picker@"8.10.1" from the root project
npm error
npm error Fix the upstream dependency conflict, or retry
npm error this command with --force or --legacy-peer-deps
npm error to accept an incorrect (and potentially broken) dependency resolution.
npm error
npm error
npm error For a full report see:
npm error ...\AppData\Local\npm-cache_logs\2025-08-09T12_35_45_117Z-eresolve-report.txt
npm error A complete log of this run can be found in: ...\AppData\Local\npm-cache_logs\2025-08-09T12_35_45_117Z-debug-0.log
PS D:\omnex360\frontend-tenants> npm install react@18 react-dom@18

[dosubot[bot]]

The install command requires React 18 because [email protected] (a dependency in the Plate UI stack) only lists React ^16.8.0, ^17.0.0, or ^18.0.0 as supported peer dependencies. npm blocks the install when using React 19, even though Plate itself supports React 19. This is a limitation of react-day-picker, not Plate. You can either downgrade to React 18 for a smooth install, or use --legacy-peer-deps to force the install (but this can cause runtime issues or broken UI) details.

Once react-day-picker updates to support React 19, this restriction will go away.

To reply, just mention @dosu.

---

^{How did I do? Good | Irrelevant | Incorrect | Verbose | Hallucination | Report 🐛 | Other}    

[bhamichi]

I have downgraded react from 19 to 18 and still the editor layout/UI is not displayed properly. Someone (not bot) can help here ?

[dosubot[bot]]

A few things to check that commonly cause this:

1. Make sure every Plate-related package (@platejs/* and platejs) is on the exact same latest version (49.2.9 or higher). Mixed versions (like some at 49.0.x, some at 49.2.x) will break the UI, even if it compiles. Upgrade them all together for full compatibility (details).

2. Confirm Tailwind CSS v4 and shadcn/ui v4 primitives are installed and that your global styles (including the required --brand CSS variable) are loaded in your app, usually in globals.css. Missing or misconfigured styles will cause layout issues (docs).

3. In React 18, all custom Plate UI components (including anything you copied or wrapped from the registry) must use React.forwardRef. If any component in the editor tree doesn’t use forwardRef, Plate’s context and selection handling can break, causing layout or interaction bugs (changelog).

4. Check your browser console for errors or warnings about refs, missing styles, or Slate/React issues. If you see any, paste them here—they’re often the fastest way to spot what’s wrong.

If you want, share your editor component code and Tailwind config and I can help spot anything off. If none of this helps, try a minimal repro with just Plate and required styles to isolate the problem.

To reply, just mention @dosu.

---

^{How did I do? Good | Irrelevant | Incorrect | Verbose | Hallucination | Report 🐛 | Other}    

[zbeyens]

Could you reproduce from the template?

[zbeyens]

It's clearly a Tailwind issue. Are you importing import './globals.css'; in your app?

[bhamichi]

We haven’t replaced our global CSS as recommended here: https://pro.platejs.org/docs/installation — our concern is that doing so might overwrite our existing global styles and cause design issues in our application.
Could you please confirm whether we must apply the recommended global CSS for Plate Pro to work properly? If so, what’s the best way to combine our current global styles with the ones from Plate, so we don’t lose our existing design?
Below is our current (unmodified) globals.css for reference:

@import "tailwindcss";

@custom-variant dark (&:is(.dark *));
/* @tailwind base;
@tailwind components;
@tailwind utilities; */

@theme {
  /* Primary Colors */
  --color-primary: rgb(96, 73, 231);
  --color-primary-light: rgb(142, 123, 255);
  --color-primary-dark: rgb(32, 109, 255);

  /* Neutral Colors */
  --color-black: rgb(23, 21, 21);
  --color-white: rgb(255, 255, 255);
  --color-gray: rgb(243, 246, 251);

  /* Background Colors */
  --color-bg-dark: rgb(9, 14, 28);
  --color-bg-light: rgb(243, 244, 246);
  --color-bg-blue: rgb(243, 246, 251);
  --color-bg-blue-light: rgb(195, 205, 255);

  /* Accent Colors */
  --color-accent-red: rgb(227, 54, 41);
  --color-accent-pink: rgb(221, 85, 184);
  --color-accent-pink-light: rgb(255, 214, 243);
  --color-accent-pink-bright: rgb(227, 41, 171);
  --color-accent-blue-light: rgb(227, 238, 255);

  /* Border Colors */
  --color-border: rgb(229, 231, 235);
  --color-border-dark: rgb(63, 67, 74);

  /* Text Colors */
  --color-text-primary: rgb(31, 41, 55);
  --color-text-secondary: rgb(75, 85, 99);

  /* Overlay Colors */
  --color-overlay-purple: rgba(174, 41, 227, 0.2);

  /* Spacing */
  --spacing-header: 50;
}

@layer base {
  :root {
    --background: 0 0% 100%;
    --foreground: 240 10% 3.9%;
    --card: 0 0% 100%;
    --card-foreground: 240 10% 3.9%;
    --popover: 0 0% 100%;
    --popover-foreground: 240 10% 3.9%;
    --primary: 240 5.9% 10%;
    --primary-foreground: 0 0% 98%;
    --secondary: 240 4.8% 95.9%;
    --secondary-foreground: 240 5.9% 10%;
    --muted: 240 4.8% 95.9%;
    --muted-foreground: 240 3.8% 46.1%;
    --accent: 240 4.8% 95.9%;
    --accent-foreground: 240 5.9% 10%;
    --destructive: 0 84.2% 60.2%;
    --destructive-foreground: 0 0% 98%;
    --border: 240 5.9% 90%;
    --input: 240 5.9% 90%;
    --ring: 240 5.9% 10%;
    --radius: 0.5rem;
  }

  .dark {
    --background: 240 10% 3.9%;
    --foreground: 0 0% 98%;
    --card: 240 10% 3.9%;
    --card-foreground: 0 0% 98%;
    --popover: 240 10% 3.9%;
    --popover-foreground: 0 0% 98%;
    --primary: 0 0% 98%;
    --primary-foreground: 240 5.9% 10%;
    --secondary: 240 3.7% 15.9%;
    --secondary-foreground: 0 0% 98%;
    --muted: 240 3.7% 15.9%;
    --muted-foreground: 240 5% 64.9%;
    --accent: 240 3.7% 15.9%;
    --accent-foreground: 0 0% 98%;
    --destructive: 0 62.8% 30.6%;
    --destructive-foreground: 0 0% 98%;
    --border: 240 3.7% 15.9%;
    --input: 240 3.7% 15.9%;
    --ring: 240 4.9% 83.9%;
  }
}

body {
  font-family: "Manrope", serif;
  overflow-x: hidden;
}

/* Line clamp utilities */
.line-clamp-1 {
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
}

.line-clamp-2 {
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.line-clamp-3 {
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}

.wrapper {
  @apply mx-auto w-full max-w-[1500px] overflow-x-hidden px-1 lg:px-4;
}

.wrapper-full {
  @apply mx-auto overflow-x-hidden px-2 lg:px-6;
}

.loginbg ::before {
  content: "";
  position: absolute;
  width: 640.41px;
  height: 640.41px;
  left: 220.53px;
  top: 786.87px;
  background: var(--color-accent-red);
  opacity: 0.55;
  filter: blur(203.408px);
  transform: rotate(-13.81deg);
}

.loginbg ::after {
  content: "";
  position: absolute;
  width: 640.41px;
  height: 640.41px;
  left: -112.86px;
  top: 903.96px;
  background: var(--color-primary-dark);
  opacity: 0.55;
  filter: blur(203.408px);
  transform: rotate(-13.81deg);
}

.gradientlight {
  @apply relative min-h-screen w-full overflow-hidden;
}

.gradientlight::before {
  content: "";
  position: absolute;
  width: 1183px;
  height: 1183px;
  left: -472px;
  top: 701px;
  background: var(--color-accent-pink);
  opacity: 0.25;
  filter: blur(177.5px);
}

.gradientlight::after {
  content: "";
  position: absolute;
  width: 1183px;
  height: 1183px;
  left: 1106px;
  top: 398px;
  background: var(--color-accent-red);
  opacity: 0.35;
  filter: blur(177.5px);
}

.contentgradient {
  @apply relative min-h-screen w-full;
}

.contentgradient::before {
  content: "";
  position: absolute;
  width: 1183px;
  height: 1183px;
  left: 368px;
  top: 519px;
  background: var(--color-primary-dark);
  opacity: 0.25;
  filter: blur(177.5px);
}

.custom-sidebar::before {
  content: "";
  position: absolute;
  width: 244px;
  height: 244px;
  left: -100px;
  bottom: -180px;
  background: var(--color-primary-dark);
  opacity: 0.55;
  filter: blur(77.5px);
}

.custom-sidebar::after {
  content: "";
  position: absolute;
  width: 244px;
  height: 244px;
  right: -100px;
  bottom: -180px;
  background: var(--color-accent-red);
  opacity: 0.55;
  filter: blur(77.5px);
}

.btngradient {
  @apply transition-all duration-300;
  background: linear-gradient(
    90deg,
    var(--color-accent-red) 0%,
    var(--color-accent-pink) 49.5%,
    var(--color-primary) 100%
  );
}

.btngradient:hover {
  background: linear-gradient(
    90deg,
    var(--color-primary) 0%,
    var(--color-accent-pink) 49.5%,
    var(--color-accent-red) 100%
  );
}

.show-bottom-border {
  border-bottom: 1px solid var(--color-primary);
}

.dark .show-bottom-border {
  border-bottom: 1px solid var(--color-primary);
}

.btn {
  @apply border-primary text-primary hover:bg-primary cursor-pointer rounded-lg border bg-none px-5 py-2 text-[13px] font-semibold transition-all duration-300 hover:text-white;
}

.btn-color {
  @apply border-primary bg-primary cursor-pointer rounded-lg border px-5 py-2 text-[13px] font-semibold text-white transition-all duration-300 hover:opacity-75;
}

.card-wrapper::before {
  content: none;
  position: absolute;
  width: 214px;
  height: 214px;
  bottom: -150px;
  background: var(--color-primary);
  opacity: 0.45;
  filter: blur(63.75px);
  transform: matrix(-1, 0, 0, 1, 0, 0);
  left: 170px;
  right: 0;
}

.card-content::before {
  content: none;
  position: absolute;
  width: 214px;
  height: 214px;
  left: 0;
  bottom: -170px;
  background: var(--color-accent-pink-bright);
  opacity: 0.45;
  filter: blur(63.75px);
  transform: matrix(-1, 0, 0, 1, 0, 0);
}

.card-content::after {
  content: none;
  position: absolute;
  width: 214px;
  height: 214px;
  right: 0;
  bottom: -150px;
  background: var(--color-accent-yellow);
  opacity: 0.25;
  filter: blur(63.75px);
  transform: matrix(-1, 0, 0, 1, 0, 0);
}

.responsive {
  @apply flex-col lg:flex-row;
}

/*------------------ New Lines after shadcn install ------------------*/

/* @theme inline {
  --radius-sm: calc(var(--radius) - 4px);
  --radius-md: calc(var(--radius) - 2px);
  --radius-lg: var(--radius);
  --radius-xl: calc(var(--radius) + 4px);
  --color-background: var(--background);
  --color-foreground: var(--foreground);
  --color-card: var(--card);
  --color-card-foreground: var(--card-foreground);
  --color-popover: var(--popover);
  --color-popover-foreground: var(--popover-foreground);
  --color-primary: var(--primary);
  --color-primary-foreground: var(--primary-foreground);
  --color-secondary: var(--secondary);
  --color-secondary-foreground: var(--secondary-foreground);
  --color-muted: var(--muted);
  --color-muted-foreground: var(--muted-foreground);
  --color-accent: var(--accent);
  --color-accent-foreground: var(--accent-foreground);
  --color-destructive: var(--destructive);
  --color-border: var(--border);
  --color-input: var(--input);
  --color-ring: var(--ring);
  --color-chart-1: var(--chart-1);
  --color-chart-2: var(--chart-2);
  --color-chart-3: var(--chart-3);
  --color-chart-4: var(--chart-4);
  --color-chart-5: var(--chart-5);
  --color-sidebar: var(--sidebar);
  --color-sidebar-foreground: var(--sidebar-foreground);
  --color-sidebar-primary: var(--sidebar-primary);
  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
  --color-sidebar-accent: var(--sidebar-accent);
  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
  --color-sidebar-border: var(--sidebar-border);
  --color-sidebar-ring: var(--sidebar-ring);
}

:root {
  --radius: 0.625rem;
  --background: oklch(1 0 0);
  --foreground: oklch(0.141 0.005 285.823);
  --card: oklch(1 0 0);
  --card-foreground: oklch(0.141 0.005 285.823);
  --popover: oklch(1 0 0);
  --popover-foreground: oklch(0.141 0.005 285.823);
  --primary: oklch(0.21 0.006 285.885);
  --primary-foreground: oklch(0.985 0 0);
  --secondary: oklch(0.967 0.001 286.375);
  --secondary-foreground: oklch(0.21 0.006 285.885);
  --muted: oklch(0.967 0.001 286.375);
  --muted-foreground: oklch(0.552 0.016 285.938);
  --accent: oklch(0.967 0.001 286.375);
  --accent-foreground: oklch(0.21 0.006 285.885);
  --destructive: oklch(0.577 0.245 27.325);
  --border: oklch(0.92 0.004 286.32);
  --input: oklch(0.92 0.004 286.32);
  --ring: oklch(0.705 0.015 286.067);
  --chart-1: oklch(0.646 0.222 41.116);
  --chart-2: oklch(0.6 0.118 184.704);
  --chart-3: oklch(0.398 0.07 227.392);
  --chart-4: oklch(0.828 0.189 84.429);
  --chart-5: oklch(0.769 0.188 70.08);
  --sidebar: oklch(0.985 0 0);
  --sidebar-foreground: oklch(0.141 0.005 285.823);
  --sidebar-primary: oklch(0.21 0.006 285.885);
  --sidebar-primary-foreground: oklch(0.985 0 0);
  --sidebar-accent: oklch(0.967 0.001 286.375);
  --sidebar-accent-foreground: oklch(0.21 0.006 285.885);
  --sidebar-border: oklch(0.92 0.004 286.32);
  --sidebar-ring: oklch(0.705 0.015 286.067);
}

.dark {
  --background: oklch(0.141 0.005 285.823);
  --foreground: oklch(0.985 0 0);
  --card: oklch(0.21 0.006 285.885);
  --card-foreground: oklch(0.985 0 0);
  --popover: oklch(0.21 0.006 285.885);
  --popover-foreground: oklch(0.985 0 0);
  --primary: oklch(0.92 0.004 286.32);
  --primary-foreground: oklch(0.21 0.006 285.885);
  --secondary: oklch(0.274 0.006 286.033);
  --secondary-foreground: oklch(0.985 0 0);
  --muted: oklch(0.274 0.006 286.033);
  --muted-foreground: oklch(0.705 0.015 286.067);
  --accent: oklch(0.274 0.006 286.033);
  --accent-foreground: oklch(0.985 0 0);
  --destructive: oklch(0.704 0.191 22.216);
  --border: oklch(1 0 0 / 10%);
  --input: oklch(1 0 0 / 15%);
  --ring: oklch(0.552 0.016 285.938);
  --chart-1: oklch(0.488 0.243 264.376);
  --chart-2: oklch(0.696 0.17 162.48);
  --chart-3: oklch(0.769 0.188 70.08);
  --chart-4: oklch(0.627 0.265 303.9);
  --chart-5: oklch(0.645 0.246 16.439);
  --sidebar: oklch(0.21 0.006 285.885);
  --sidebar-foreground: oklch(0.985 0 0);
  --sidebar-primary: oklch(0.488 0.243 264.376);
  --sidebar-primary-foreground: oklch(0.985 0 0);
  --sidebar-accent: oklch(0.274 0.006 286.033);
  --sidebar-accent-foreground: oklch(0.985 0 0);
  --sidebar-border: oklch(1 0 0 / 10%);
  --sidebar-ring: oklch(0.552 0.016 285.938);
}

@layer base {
  * {
    @apply border-border outline-ring/50;
  }
  body {
    @apply bg-background text-foreground;
  }
} */

[zbeyens]

Sorry, we can't provide support to integrate Plate into an existing app, but we could if you could reproduce your issue from https://github.com/udecode/plate-template

[bhamichi]

I followed the instructions from https://github.com/udecode/plate-template as per your suggestion, but I’m encountering numerous issues — including import statements with extra quotes and missing packages.
Has anyone actually tested this Plate templates and packages before releasing it to the market? It’s quite frustrating to spend $299 and follow the documented procedure, only to find that it doesn’t work as expected.

[zbeyens]

It does work on MacOS, recording just now:

pro-installation.mp4

[bhamichi]

Hello, thanks for giving this a try! Did you test installing it on Windows? In the video, here’s what I see after running the first two commands : many import statements with extra quotes !!!

Plate.Pro.mp4

[zbeyens]

That's probably a bug from https://github.com/shadcn-ui/ui

Workarounds are:

• replace all "' and '" with '
• don't use the CLI and directly clone https://github.com/udecode/plate-template

[bhamichi]

Hello,

I replaced all occurrences of ' and " with ', but in some cases where it wasn’t necessary, they were also changed. This has made debugging much more time-consuming.
What exactly do you mean by “don’t use the CLI and directly clone”? Here, it’s actually recommended to use only the CLI.
If you’ve identified this as a bug, could you provide a workaround (and all steps)?
Also, who is responsible for handling invoicing and payments? Is there any possibility of getting a refund? How is it possible to sell a product that hasn’t been properly tested, leaving us to debug it ourselves and waste so much time?

[zbeyens]

Sorry it's not going well. Please see https://pro.platejs.org/ FAQ's "Do you offer technical support?".

[bhamichi]

I have tried Workarounds:

replace all "' and '" with '
don't use the CLI and directly clone https://github.com/udecode/plate-template

Here what I'm getting !!!

What is the next step ?

[zbeyens]

Did you run pnpm install?

[zbeyens]

Here is a recording using the template without the CLI:

potion-installation.mp4

Please reproduce the same steps and let me know if another issue occurs.

[shawonsaha]

Hello @zbeyens,

After integrating Plate Pro into our existing application, I am encountering the same problem as reported before. I carefully followed all the steps from the official installation guide at https://pro.platejs.org/docs/installation, including copying the registry folder into /src as you showed in your screen recording. However, the editor is still broken.

Is there anything else that needs to be configured, or could there be a compatibility issue with our current setup? Any suggestions or troubleshooting steps would be greatly appreciated.

[zbeyens]

It looks like Tailwind is not set up. See https://tailwindcss.com/docs/installation

[shawonsaha]

@zbeyens That is strange !!! Our project usage tailwind from the vary beginning

[bhamichi]

It seems I’m not the only one facing this issue. This Pro library works fine on a new empty project, but not on existing ones. We’ve already lost a lot of time trying to debug it, and we’re still stuck, especially since support hasn’t provided any solution.

[zbeyens]

Let's step back and try this first in your existing project: https://platejs.org/docs/installation

[shawonsaha]

@zbeyens Could you please share a technical guide on how we can integrate this into an existing project? We initially followed the official documentation without success, and also tried the approach shown in your video demo, but it still did not work.

[zbeyens]

See https://platejs.org/docs/installation, then if that works, Potion installation should work.