Add a separator into Tiptap

A visual divider between content in menus, toolbars, or other UI elements.

Install

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

npx @tiptap/cli add separator

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 { Separator } from '@/components/tiptap-ui-primitive/separator'

export default function MyComponent() {
  return (
    <div className="tiptap-tools">
      <button>Button 1</button>
      <Separator />
      <button>Button 2</button>
    </div>
  )
}

Props

Separator