Tiptap UI Components

Tiptap UI Components is a library of modular, MIT-licensed React components, templates, and primitives that help you build rich text editor UIs faster, on top of the headless Tiptap framework.

This repository may not always contain the latest version of the UI Components. For the most up-to-date components and templates, install them directly using the Tiptap CLI.

Installation

Recommended: Always install or update via the CLI to ensure you get the latest version.

To scaffold your setup:

npx @tiptap/cli init

Or to install a specific component:

npx @tiptap/cli add [component-name]

For full docs and more details, head over to the Tiptap UI Components overview page: https://tiptap.dev/docs/ui-components/getting-started/overview

Available Components

Templates

Fully working editor setups, ready to clone and customize:

Simple Editor (MIT Licensed):

• Responsive layout
• Light/Dark mode support
• Rich text formatting, image upload, link editing
• Fully customizable

Components

The components available in this public repository are MIT licensed and freely available:

UI Components

• Blockquote button
• Code block button
• Color highlight button / popover
• Heading button / dropdown
• Image upload button
• Link popover
• List button / dropdown
• Mark button
• Text align button
• Undo redo button

Node Components

• Code block
• Image
• Image upload
• List
• Paragraph

Primitives

• Avatar, Badge, Button
• Dropdown menu, Popover, Separator
• Spacer, Toolbar, Tooltip

Customization

All components are designed with minimal, neutral styling to blend into your existing design system.

No themes or complex overrides required. Edit the source directly to match your brand or component system.

Contributing

Want to contribute, suggest a component, or report a bug? Open an issue or join the discussion in Discord.