Integrate Tiptap UI Components

Tiptap is headless and modular, giving you full control over the UI. The Tiptap UI Components library provides prebuilt interfaces, so you don’t have to build everything from scratch. Use them as-is or customize them to fit your setup.

Getting started

Templates

Get started fast with a prebuilt editor that includes commonly used features.

Components

Already using Tiptap? Drop in just the pieces you need.

License and source code

Tiptap UI Components follow the same license as the editor extension they’re built on.

• If the extension is open source (like Bold, Heading, or Image), the UI component is MIT licensed too.
• You’re free to read the source code, copy it, and customize it however you like.

Some components are built for paid Tiptap features, like Comments or Version History.

• These components are not open source.
• Most include frontend logic that depends on Tiptap’s backend services.
• A Tiptap Cloud subscription or trial is required to use them.

No matter the type (free or cloud-connected), you can inspect the source code and adapt it to your use case.

Design defaults

Components are designed to feel vanilla and blend into your design. They come with neutral styling: minimal colors, basic spacing, and no strong visual opinions. You can use them as-is or customize them to match your brand.

The design is consistent and cohesive across all components, so if you use multiple of them together, they’ll match nicely without extra work.

• No complex overrides or !important hacks needed
• Just edit the code directly because it’s meant to be forked or extended

Components and primitives

To build a great editing experience in your Tiptap editor, you can integrate UI elements. The library provides different types of building blocks for this: Components, Node Components and Primitives.

Components

Ready-made, feature-specific React components like a heading dropdown for example. Each UI Component typically pairs with a Tiptap extension (e.g., the ListButton relies on list-related extensions), and uses React hooks to interact with the editor’s state.

• Works with extensions: To use a component (e.g., HeadingDropdownMenu), ensure the matching Tiptap extension (like @tiptap/extension-heading) is enabled in your editor.
• Leverages hooks: Many components internally consume hooks (like useTiptapEditor or useFloatingElement) to synchronize with editor state, handle positioning, or manage keyboard navigation. You can also use these hooks in your own custom components.
• Easy customization: By default, these components have minimal styling so they can blend into your design. You can fully override or extend them. Each component’s source code is openly available for direct edits with no !important hacks.

Primitives

Low-level UI elements like Button,DropdownMenu,Popover and Spacer. They’re the foundation of many UI Components, handling accessibility and basic behavior. You can mix and match these primitives to create your own editor controls or to further customize existing components.