@plate

Plate is a React framework for building AI-powered rich-text editors built on Slate and Slate-React. The shadcn registry (325 items) delivers Plate UI: copyable toolbar components (fixed, floating, AI menu), block draggable, cursor overlay, inline combobox, caption, comment/suggestion toolbars, media upload, ghost text, and full editor kits. Headless @platejs/* plugins cover formatting, serialization, collaboration (Yjs/Loro), AI completions, and more. Tailwind v3/v4 compatible, Radix UI-based. Free and open-source (MIT, 16k+ GitHub stars); a paid Notion-like Potion template is offered separately via pro.platejs.org. Use for: embedding a fully featured, extensible rich-text editor (with AI, comments, or collaborative editing) into a React or Next.js app.

60 components react shadcn-cli

website ↗ github ↗ registry ↗

Install this registry

shadcn (npm) npx shadcn@latest add https://platejs.org/r/registry.json

pnpm pnpm dlx shadcn@latest add https://platejs.org/r/registry.json

bun bunx shadcn@latest add https://platejs.org/r/registry.json

fetch registry curl -s https://platejs.org/r/registry.json

Components

60 total

plate lib

Install Plate package

npx shadcn@latest add https://platejs.org/r/plate.json

plate-ui style

Install Plate package and styles

npx shadcn@latest add https://platejs.org/r/plate-ui.json

AI Menu ui

A menu for AI-powered content generation and insertion.

npx shadcn@latest add https://platejs.org/r/ai-menu.json

AI Toolbar Button ui

A toolbar button for accessing AI features.

npx shadcn@latest add https://platejs.org/r/ai-toolbar-button.json

Align Toolbar Button ui

A dropdown menu for text alignment controls.

npx shadcn@latest add https://platejs.org/r/align-toolbar-button.json

Block Context Menu ui

A context menu for block-level operations.

npx shadcn@latest add https://platejs.org/r/block-context-menu.json

Block Selection ui

A visual overlay for selected blocks.

npx shadcn@latest add https://platejs.org/r/block-selection.json

Import Toolbar Button ui

A toolbar button to import editor content from a file.

npx shadcn@latest add https://platejs.org/r/import-toolbar-button.json

Export Toolbar Button ui

A toolbar button for exporting editor content in various formats (HTML, PDF, Image, Markdown).

npx shadcn@latest add https://platejs.org/r/export-toolbar-button.json

Caption ui

A text field for adding captions to media elements.

npx shadcn@latest add https://platejs.org/r/caption.json

Font Color Toolbar Button ui

A color picker toolbar button with text and background color controls.

npx shadcn@latest add https://platejs.org/r/font-color-toolbar-button.json

Comment Toolbar Button ui

A toolbar button for adding inline comments.

npx shadcn@latest add https://platejs.org/r/comment-toolbar-button.json

Block Suggestion ui

npx shadcn@latest add https://platejs.org/r/block-suggestion.json

Block Discussion ui

A popover interface for managing discussions: comments, replies, suggestions.

npx shadcn@latest add https://platejs.org/r/block-discussion.json

Cursor Overlay ui

A visual overlay for cursors and selections.

npx shadcn@latest add https://platejs.org/r/cursor-overlay.json

Block Draggable ui

A block wrapper with a drag handle for moving editor blocks.

npx shadcn@latest add https://platejs.org/r/block-draggable.json

Editor ui

A container for the editor content and styling.

npx shadcn@latest add https://platejs.org/r/editor.json

Select Editor ui

An editor to select tags.

npx shadcn@latest add https://platejs.org/r/select-editor.json

Emoji Toolbar Button ui

An emoji picker toolbar button.

npx shadcn@latest add https://platejs.org/r/emoji-toolbar-button.json

Fixed Toolbar Buttons ui

A set of commonly used formatting buttons.

npx shadcn@latest add https://platejs.org/r/fixed-toolbar-buttons.json

Fixed Toolbar List Buttons ui

npx shadcn@latest add https://platejs.org/r/fixed-toolbar-classic-buttons.json

Fixed Toolbar ui

A fixed toolbar that stays at the top of the editor.

npx shadcn@latest add https://platejs.org/r/fixed-toolbar.json

Floating Toolbar Buttons ui

A set of formatting buttons for the floating toolbar.

npx shadcn@latest add https://platejs.org/r/floating-toolbar-buttons.json

Floating Toolbar Classic Buttons ui

A set of commonly used formatting buttons for the floating toolbar with classic list support.

npx shadcn@latest add https://platejs.org/r/floating-toolbar-classic-buttons.json

Floating Toolbar ui

A contextual toolbar that appears over selected text.

npx shadcn@latest add https://platejs.org/r/floating-toolbar.json

Ghost Text ui

A text suggestion system that displays AI-generated content after the cursor.

npx shadcn@latest add https://platejs.org/r/ghost-text.json

History Toolbar Button ui

Toolbar buttons for undo and redo operations.

npx shadcn@latest add https://platejs.org/r/history-toolbar-button.json

List Toolbar Button ui

A toolbar control for adjusting list indentation.

npx shadcn@latest add https://platejs.org/r/list-toolbar-button.json

Indent Toolbar Buttons ui

Toolbar controls for block indentation.

npx shadcn@latest add https://platejs.org/r/indent-toolbar-button.json

Inline Combobox ui

A combobox for inline suggestions.

npx shadcn@latest add https://platejs.org/r/inline-combobox.json

Insert Toolbar Button ui

A menu for inserting different types of blocks.

npx shadcn@latest add https://platejs.org/r/insert-toolbar-button.json

Insert Toolbar Classic Button ui

A menu for inserting different types of blocks with classic list support.

npx shadcn@latest add https://platejs.org/r/insert-toolbar-classic-button.json

Line Height Toolbar Button ui

A menu for controlling text line spacing.

npx shadcn@latest add https://platejs.org/r/line-height-toolbar-button.json

Link Floating Toolbar ui

A floating interface for link editing.

npx shadcn@latest add https://platejs.org/r/link-toolbar.json

Link Toolbar Button ui

A toolbar control for link management.

npx shadcn@latest add https://platejs.org/r/link-toolbar-button.json

List Toolbar Buttons ui

Toolbar controls for list creation and management.

npx shadcn@latest add https://platejs.org/r/list-classic-toolbar-button.json

Mark Toolbar Button ui

A toolbar control for basic text formatting.

npx shadcn@latest add https://platejs.org/r/mark-toolbar-button.json

Media Toolbar ui

A toolbar interface for media settings.

npx shadcn@latest add https://platejs.org/r/media-toolbar.json

Media Toolbar Button ui

Toolbar button for inserting and managing media.

npx shadcn@latest add https://platejs.org/r/media-toolbar-button.json

Media Upload Toast ui

Show toast notifications for media uploads.

npx shadcn@latest add https://platejs.org/r/media-upload-toast.json

Mode Toolbar Button ui

A menu for switching between editor modes.

npx shadcn@latest add https://platejs.org/r/mode-toolbar-button.json

More Toolbar Button ui

A menu for additional text formatting options.

npx shadcn@latest add https://platejs.org/r/more-toolbar-button.json

Resize Handle ui

A resizable wrapper with resize handles.

npx shadcn@latest add https://platejs.org/r/resize-handle.json

Table Toolbar Button ui

A menu for table manipulation and formatting.

npx shadcn@latest add https://platejs.org/r/table-toolbar-button.json

Toggle Toolbar Button ui

A toolbar button for expanding and collapsing blocks.

npx shadcn@latest add https://platejs.org/r/toggle-toolbar-button.json

Turn Into Toolbar Button ui

A menu for converting between different block types.

npx shadcn@latest add https://platejs.org/r/turn-into-toolbar-button.json

Turn Into Toolbar Classic Button ui

A dropdown to convert block types with classic list support.

npx shadcn@latest add https://platejs.org/r/turn-into-toolbar-classic-button.json

Remote Cursor Overlay ui

A cursor overlay to display multiplayer cursors in the yjs plugin.

npx shadcn@latest add https://platejs.org/r/remote-cursor-overlay.json

Toolbar ui

A customizable toolbar component with various button styles and group

npx shadcn@latest add https://platejs.org/r/toolbar.json

Suggestion Toolbar Button ui

A toolbar button for toggling suggestion mode in the editor.

npx shadcn@latest add https://platejs.org/r/suggestion-toolbar-button.json

AI Leaf ui

A text highlighter for AI-generated content.

npx shadcn@latest add https://platejs.org/r/ai-node.json

List ui

List components.

npx shadcn@latest add https://platejs.org/r/block-list.json

Blockquote Element ui

A quote component for block quotes.

npx shadcn@latest add https://platejs.org/r/blockquote-node.json

callout-node ui

A callout component for highlighting important information with customizable icons and styles.

npx shadcn@latest add https://platejs.org/r/callout-node.json

Code Block Nodes ui

A code block with syntax highlighting and language selection.

npx shadcn@latest add https://platejs.org/r/code-block-node.json

Code Drawing Node ui

Create diagrams from code using PlantUML, Graphviz, Flowchart, or Mermaid.

npx shadcn@latest add https://platejs.org/r/code-drawing-node.json

Code Leaf ui

An inline component for code snippets.

npx shadcn@latest add https://platejs.org/r/code-node.json

Column Nodes ui

Resizable column components for layout.

npx shadcn@latest add https://platejs.org/r/column-node.json

Comment Leaf ui

A text component for displaying comments with visual indicators.

npx shadcn@latest add https://platejs.org/r/comment-node.json

Suggestion Leaf ui

A text component for suggestion.

npx shadcn@latest add https://platejs.org/r/suggestion-node.json