plate — 10 React Components, Preview & Copy

ai-kit

@platejs/ai1 file

AI Menu

ai-menu

A menu for AI-powered content generation and insertion.

@platejs/ai, @platejs/selection, ai@7, cmdk2 files

AI Leaf

ai-node

A text highlighter for AI-generated content.

1 file

AI Toolbar Button

ai-toolbar-button

A toolbar button for accessing AI features.

@platejs/ai1 file

align-base-kit

@platejs/basic-styles1 file

align-kit

@platejs/basic-styles1 file

Align Toolbar Button

align-toolbar-button

A dropdown menu for text alignment controls.

@platejs/basic-styles1 file

autoformat-classic-kit

@platejs/code-block, @platejs/list-classic1 file

autoformat-kit

@platejs/code-block, @platejs/list1 file

basic-blocks-base-kit

1 file

basic-blocks-kit

1 file

basic-marks-kit

@platejs/basic-nodes1 file

basic-nodes-kit

1 file2 examples

Block Context Menu

block-context-menu

A context menu for block-level operations.

@platejs/ai, @platejs/selection1 file

Block Discussion

block-discussion

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

@platejs/comment, date-fns, @platejs/suggestion4 files

Block Draggable

block-draggable

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

@platejs/dnd, @platejs/selection1 file

block-menu-kit

@platejs/selection1 file

block-placeholder-kit

1 file

block-selection-kit

@platejs/selection1 file

Block Suggestion

block-suggestion

@platejs/suggestion

callout-base-kit

@platejs/callout1 file

callout-kit

@platejs/callout1 file

callout-node

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

@platejs/callout2 files

code-block-base-kit

@platejs/code-block, lowlight1 file

code-block-kit

@platejs/code-block, lowlight1 file

Code Block Nodes

code-block-node

A code block with syntax highlighting and language selection.

@platejs/code-block, lowlight2 files

code-drawing-base-kit

@platejs/code-drawing1 file

code-drawing-kit

@platejs/code-drawing1 file

Code Drawing Node

code-drawing-node

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

@platejs/code-drawing2 files

column-base-kit

@platejs/layout1 file

column-kit

@platejs/layout1 file

Column Nodes

column-node

Resizable column components for layout.

@udecode/cn, @platejs/layout2 files

comment-base-kit

@platejs/comment1 file

comment-kit

@platejs/comment1 file

Comment Leaf

comment-node

A text component for displaying comments with visual indicators.

@platejs/comment2 files

Comment Toolbar Button

comment-toolbar-button

A toolbar button for adding inline comments.

@platejs/comment1 file

copilot-kit

@platejs/ai, @platejs/markdown, @faker-js/faker1 file2 examples

cursor-overlay-kit

@platejs/selection1 file

date-base-kit

@platejs/date1 file

date-kit

@platejs/date1 file

Date Element

date-node

A date field component with calendar picker.

@platejs/date2 files

discussion-kit

1 file

dnd-kit

@platejs/dnd, @platejs/media, react-dnd, react-dnd-html5-backend1 file

docx-export-kit

@platejs/docx-io1 file

docx-kit

@platejs/docx, @platejs/juice1 file

editor-ai

An AI editor

sonner3 files

editor-base-kit

1 file1 example

editor-basic

A basic editor

@platejs/basic-nodes, @platejs/basic-nodes2 files

editor-kit

1 file2 examples

editor-select

A multi-select editor

plate-ui1 file

emoji-kit

@platejs/emoji, @emoji-mart/data@1.2.11 file

Emoji Input Element

emoji-node

An input component for emoji search and insertion.

@platejs/emoji, @emoji-mart/data@1.2.11 file

Emoji Toolbar Button

emoji-toolbar-button

An emoji picker toolbar button.

@platejs/emoji, @emoji-mart/data@1.2.1, @radix-ui/react-popover1 file

Equation Element

equation-node

Displays a LaTeX equation element with an editable popover for inputting and rendering mathematical expressions.

@platejs/math, react-textarea-autosize2 files

Equation Toolbar Button

equation-toolbar-button

A toolbar button for inserting and editing equations.

@platejs/math1 file

excalidraw-kit

@platejs/excalidraw, @excalidraw/excalidraw1 file

Excalidraw Element

excalidraw-node

A drawing component powered by Excalidraw.

@platejs/excalidraw1 file

exit-break-kit

1 file

Export Toolbar Button

export-toolbar-button

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

@platejs/docx-io, @platejs/markdown, html2canvas-pro, pdf-lib1 file

Fixed Toolbar

fixed-toolbar

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

tailwind-scrollbar-hide1 file

Fixed Toolbar Buttons

fixed-toolbar-buttons

A set of commonly used formatting buttons.

1 file

Fixed Toolbar List Buttons

fixed-toolbar-classic-buttons

1 file

fixed-toolbar-classic-kit

1 file

fixed-toolbar-kit

1 file

Floating Toolbar

floating-toolbar

A contextual toolbar that appears over selected text.

@udecode/cn, @platejs/floating1 file

Floating Toolbar Buttons

floating-toolbar-buttons

A set of formatting buttons for the floating toolbar.

1 file

Floating Toolbar Classic Buttons

floating-toolbar-classic-buttons

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

1 file

floating-toolbar-classic-kit

1 file

floating-toolbar-kit

1 file

font-base-kit

@platejs/basic-styles1 file

Font Color Toolbar Button

font-color-toolbar-button

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

@udecode/cn, @platejs/basic-styles, lodash1 file

font-kit

@platejs/basic-styles1 file

Font Size Toolbar Button

font-size-toolbar-button

A toolbar control for adjusting font size.

@platejs/basic-styles1 file

footnote-base-kit

@platejs/footnote1 file

footnote-kit

@platejs/footnote1 file

Footnote Elements

footnote-node

Inline footnote references, definitions, and input UI.

@platejs/footnote2 files

Ghost Text

ghost-text

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

@platejs/ai1 file

History Toolbar Button

history-toolbar-button

Toolbar buttons for undo and redo operations.

1 file

Horizontal Rule Element

hr-node

A horizontal rule component with focus states.

2 files

Import Toolbar Button

import-toolbar-button

A toolbar button to import editor content from a file.

@platejs/docx-io, use-file-picker@2.1.21 file

indent-base-kit

@platejs/indent1 file

indent-kit

@platejs/indent1 file

Indent Toolbar Buttons

indent-toolbar-button

Toolbar controls for block indentation.

@platejs/indent1 file

Insert Toolbar Button

insert-toolbar-button

A menu for inserting different types of blocks.

dropdown-menu1 file

Insert Toolbar Classic Button

insert-toolbar-classic-button

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

dropdown-menu1 file

line-height-base-kit

@platejs/basic-styles1 file

line-height-kit

@platejs/basic-styles1 file

Line Height Toolbar Button

line-height-toolbar-button

A menu for controlling text line spacing.

@platejs/basic-styles1 file

link-kit

@platejs/link1 file

Link Floating Toolbar

link-toolbar

A floating interface for link editing.

@platejs/link, @platejs/floating1 file

Link Toolbar Button

link-toolbar-button

A toolbar control for link management.

@platejs/link1 file

list-base-kit

@platejs/list1 file

list-classic-kit

@platejs/list-classic1 file

List Nodes

list-classic-node

List (classic) nodes for ordered and unordered items.

@platejs/list-classic1 file

List Toolbar Buttons

list-classic-toolbar-button

Toolbar controls for list creation and management.

@platejs/list-classic1 file

list-kit

@platejs/list1 file

List Toolbar Button

list-toolbar-button

A toolbar control for adjusting list indentation.

@platejs/list1 file

markdown-kit

@platejs/footnote, @platejs/markdown, remark-emoji, remark-gfm1 file

Mark Toolbar Button

mark-toolbar-button

A toolbar control for basic text formatting.

@platejs/basic-nodes1 file

math-kit

@platejs/math1 file

media-base-kit

@platejs/media1 file

Media Embed Element

media-embed-node

A component for embedded media content with resizing and caption support.

@platejs/media, @platejs/resizable, react-tweet, react-lite-youtube-embed1 file

Image Element

media-image-node

Image element with lazy loading, resizing capabilities, and optional caption.

@platejs/media, @platejs/resizable2 files

media-kit

Media kit without API (see media-uploadthing-api for reference)

@platejs/caption, @platejs/media1 file

Media Placeholder Element

media-placeholder-node

A placeholder for media upload progress indication.

@platejs/media, use-file-picker@2.1.21 file

Media Preview Dialog

media-preview-dialog

A modal component for previewing and manipulating images.

@platejs/media1 file

Media Toolbar

media-toolbar

A toolbar interface for media settings.

@platejs/media1 file

Media Toolbar Button

media-toolbar-button

Toolbar button for inserting and managing media.

@platejs/media, use-file-picker@2.1.2, sonner1 file

media-uploadthing-kit

media-kit + media-uploadthing-api

media-uploadthing-api

Media Upload Toast

media-upload-toast

Show toast notifications for media uploads.

@platejs/media, sonner1 file

Media Video Element

media-video-node

A video player component with YouTube and file upload support.

@platejs/media, @platejs/resizable, react-player@3.3.1, react-lite-youtube-embed2 files

mention-base-kit

@platejs/mention1 file

mention-kit

@platejs/mention1 file

Mention Nodes

mention-node

A mention element with customizable prefix and label, powered by a combobox.

@platejs/mention2 files

Mode Toolbar Button

mode-toolbar-button

A menu for switching between editor modes.

dropdown-menu1 file

More Toolbar Button

more-toolbar-button

A menu for additional text formatting options.

dropdown-menu1 file

Paragraph Element

paragraph-node

A paragraph block with background color support.

2 files

plate-types

@platejs/comment, @platejs/excalidraw, @platejs/link, @platejs/media1 file

Search Highlight Leaf

search-highlight-node

A component that highlights search results in text.

1 file

Select Editor

select-editor

An editor to select tags.

fzf@0.5.2, @platejs/tag, @udecode/cmdk1 file1 example

settings-dialog

@platejs/ai1 file

slash-kit

@platejs/slash-command1 file

Slash Input Element

slash-node

A command input component for inserting various elements.

@platejs/ai1 file

suggestion-base-kit

@platejs/suggestion1 file

suggestion-kit

@platejs/suggestion1 file

Suggestion Leaf

suggestion-node

A text component for suggestion.

@platejs/suggestion2 files

Suggestion Toolbar Button

suggestion-toolbar-button

A toolbar button for toggling suggestion mode in the editor.

@platejs/suggestion1 file

tabbable-kit

@platejs/tabbable1 file

table-kit

@platejs/table1 file

Table Element

table-node

A table component with floating toolbar and border customization.

@platejs/table, @radix-ui/react-popover3 files

Table Toolbar Button

table-toolbar-button

A menu for table manipulation and formatting.

@platejs/table2 files

toc-kit

@platejs/toc1 file

TOC Element

toc-node

A table of contents component with links to document headings.

@platejs/toc2 files

toggle-kit

@platejs/toggle1 file

Toggle Element

toggle-node

A collapsible component for toggling content visibility.

@platejs/toggle2 files

Toggle Toolbar Button

toggle-toolbar-button

A toolbar button for expanding and collapsing blocks.

@platejs/toggle1 file

Toolbar

A customizable toolbar component with various button styles and group

@radix-ui/react-toolbar1 file

transforms

@platejs/callout, @platejs/code-block, @platejs/date, @platejs/toc1 file

transforms-classic

@platejs/callout, @platejs/code-block, @platejs/date, @platejs/layout1 file

Turn Into Toolbar Button

turn-into-toolbar-button

A menu for converting between different block types.

dropdown-menu1 file

Turn Into Toolbar Classic Button

turn-into-toolbar-classic-button

A dropdown to convert block types with classic list support.

dropdown-menu1 file

use-chat

@ai-sdk/react@4, @faker-js/faker1 file

Option	Plate	Plugins	AI	Backend
Notion-like template	✅	✅	✅	✅
Plate playground template	✅	✅	✅
Plate minimal template	✅

plate contents

Basic Marks Base Kit

Table Base Kit

Toggle Base Kit

Link Base Kit

Media File Element

Media Audio Element

Inline Combobox

Math Base Kit

TOC Base Kit

List

About plate

Also in the plate registry

ai-kit

AI Menu

AI Leaf

AI Toolbar Button

align-base-kit

align-kit

Align Toolbar Button

autoformat-classic-kit

autoformat-kit

basic-blocks-base-kit

basic-blocks-kit

basic-marks-kit

basic-nodes-kit

Block Context Menu

Block Discussion

Block Draggable

block-menu-kit

block-placeholder-kit

block-selection-kit

Block Suggestion

callout-base-kit

callout-kit

callout-node

code-block-base-kit

code-block-kit

Code Block Nodes

code-drawing-base-kit

code-drawing-kit

Code Drawing Node

column-base-kit

column-kit

Column Nodes

comment-base-kit

comment-kit

Comment Leaf

Comment Toolbar Button

copilot-kit

cursor-overlay-kit

date-base-kit

date-kit

Date Element

discussion-kit

dnd-kit

docx-export-kit

docx-kit

editor-ai

editor-base-kit

editor-basic

editor-kit

editor-select

emoji-kit

Emoji Input Element

Emoji Toolbar Button

Equation Element

Equation Toolbar Button

excalidraw-kit

Excalidraw Element

exit-break-kit

Export Toolbar Button

Fixed Toolbar

Fixed Toolbar Buttons

Fixed Toolbar List Buttons

fixed-toolbar-classic-kit

fixed-toolbar-kit

Floating Toolbar

Floating Toolbar Buttons

Floating Toolbar Classic Buttons