Add a toolbar UI component into Tiptap

A container for organizing actions and controls in a horizontal or vertical layout.

Install

You can add the primitive via Tiptap CLI (for Vite or Next.js)

npx @tiptap/cli add toolbar

Manual Integration

For frameworks other than Vite or Next.js, add the primitive manually from the open-source repository.

Import styles

This component requires you to import our styles which were added to styles/keyframe-animation.scss and styles/_variables.scss.

Usage

import { Toolbar, ToolbarGroup, ToolbarSeparator } from '@/components/tiptap-ui-primitive/toolbar'
import { Button } from '@/components/tiptap-ui-primitive/button'
import { BoldIcon } from '@/components/icons/bold-icon'
import { ItalicIcon } from '@/components/icons/italic-icon'
import { Spacer } from '@/components/tiptap-ui-primitive/spacer'

export default function MyComponent() {
  return (
    <Toolbar variant="default">
      <ToolbarGroup>
        <Button data-style="ghost">
          <BoldIcon className="tiptap-button-icon" />
        </Button>
        <Button data-style="ghost">
          <ItalicIcon className="tiptap-button-icon" />
        </Button>
      </ToolbarGroup>

      <ToolbarSeparator />

      <ToolbarGroup>
        <Button data-style="ghost">Format</Button>
      </ToolbarGroup>

      <Spacer />

      <ToolbarGroup>
        <Button data-style="primary">Save</Button>
      </ToolbarGroup>
    </Toolbar>
  )
}

Props

Name	Type	Default	Description
variant	'default' \| 'floating'	'default'	Toolbar style variant
data-plain	boolean	undefined	Whether to use plain styling

ToolbarSeparator

Name	Type	Default	Description
orientation	'horizontal' \| 'vertical'	'vertical'	Orientation of the separator