Components overview

Components and Node Components offer prebuilt functionality for integrating with Tiptap’s features (with node components being elements within the editor content), while primitives are the fundamental, low-level UI pieces used as the backbone for building these richer interactions.

Components

Add a button that triggers AI-powered content generation and editing for selected text.

Add an intelligent AI-powered menu for content editing, generation, and transformation.

Blockquote Button

Add a button that toggles through block-level nodes like blockquotes.

Code Block Button

Add a button that toggles through block-level nodes like blockquotes.

Color Highlight Button

Add a button that applies color highlights to selected text in Tiptap editors.

Color highlight popover

Add a popover in which you can select a highlight. Add this UI component to your Tiptap Editor.

Color Text Button

Apply custom text colors in Tiptap editors with predefined color options, keyboard shortcuts, and full accessibility support.

Color Text Popover

A comprehensive color picker popover for both text and highlight colors in Tiptap editors with recent colors, keyboard navigation, and visual color feedback.

Copy Anchor Link Button

A prebuilt React component that copies anchor links to nodes in the editor.

Copy to Clipboard Button

A prebuilt React component that copies editor content to the clipboard.

Delete Node Button

A prebuilt React component that deletes nodes from the editor.

Drag Context Menu

Add a drag handle with context menu that provides block-level operations like transforming, styling, copying, and deleting nodes.

Duplicate Button

A prebuilt React component that duplicates nodes in the editor.

Emoji Dropdown Menu

A prebuilt React component that provides emoji suggestions triggered by typing `:`.

Add an interactive emoji picker menu with search and keyboard navigation capabilities.

Emoji Trigger Button

A prebuilt React component that inserts emoji trigger characters in the editor.

Toggle through headings with a button.

Heading dropdown menu

A prebuilt React component that provides a dropdown menu for selecting heading levels.

Image Align Button

A prebuilt React component that controls image alignment in the Tiptap editor.

Image upload button

Upload an image by triggering a button.

Improve dropdown

Enhance text with AI-powered improvements like grammar fixes, tone adjustments, and translations.

Add a popover element featuring link options.

Toggle through bullet, ordered or task lists with a button.

Select a list type from a dropdown menu.

Add a button to trigger a text mark like bold, italics, etc.

Mention Dropdown Menu

A prebuilt React component that provides a dropdown menu for mentioning users in Tiptap editors.

Mention Trigger Button

A prebuilt React component that inserts mention trigger characters into Tiptap editors.

Move Node Button

A prebuilt React component that moves nodes up or down in the editor.

Reset All Formatting Button

A prebuilt React component that removes all formatting marks from the current selection.

Slash Command Trigger Button

A prebuilt React component that inserts slash command triggers into Tiptap editors.

Slash Dropdown Menu

A prebuilt React component that provides a slash command interface for quick content insertion and formatting.

Text align button

Switch through text alignment options with a button

Transform selected content into paragraph text with smart detection and keyboard shortcuts for Tiptap editors.

Turn Into Dropdown

Add a dropdown menu for transforming block elements between different content types.

Undo or redo an action with a button

Utils Components

Floating Element

A versatile React component that creates floating UI elements positioned relative to text selections in Tiptap editors.

Suggestion Menu

A powerful and flexible suggestion menu system for Tiptap editors. Creates floating dropdown menus triggered by configurable characters with full keyboard navigation, filtering, and customizable rendering support.

Node Components

Blockquote UI node

Add a blockquote node component to your editor.

Code block UI node

Add a code block node component to your editor.

Heading UI node

Add a heading node component to your editor.

Horizontal Rule UI node

Add a horizontal rule node component to your editor.

Integrate an image node UI component.

An enhanced image node component for Tiptap editors with floating toolbar, alignment controls, and advanced management features.

Image upload node

Upload an image via a node UI component

Add a node component that renders lists.

Add a paragraph UI node component

Primitives

Integrate a visual representation of a user or entity into your Tiptap editor.

Integrate a small visual indicator into your Tiptap editor.

Add a button UI component into your Tiptap editor.

A flexible container that groups related content and actions in a unified way.

A searchable dropdown that combines an input field with a filterable list of options for enhanced user interaction.

Select an option from a dropdown menu UI component.

A simple input field component for text entry with consistent styling and accessibility features.

A semantic label component that can render as either a label or div element with consistent typography and interaction handling.

A comprehensive menu system that supports hierarchical navigation, search functionality, filtering, and keyboard interactions with full accessibility support.

Integrate a pop-up UI element next a selection.

Separate menu items in toolbars from one another.

Add some space between your menu items.

TextareaAutosize

A textarea component that automatically adjusts its height based on content, with server-side rendering compatibility and smooth resize behavior.

Organize actions and controls in a toolbar UI component.

Add a popup that appears when you hover over elements.