Add a separator into Tiptap

Available for free

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

Install

You can add the primitive via Tiptap CLI

npx @tiptap/cli@latest add separator

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

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