---
title: "Add a separator into Tiptap"
description: "Add a visual divider between content in menus, toolbars, or other UI elements. More in the docs!"
canonical_url: "https://tiptap.dev/docs/ui-components/primitives/separator"
---

# Add a separator into Tiptap

Add a visual divider between content in menus, toolbars, or other UI elements. More in the docs!

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

> **Interactive demo:** [separator](https://template.tiptap.dev/preview/tiptap-ui-primitive/separator)

## Install

You can add the primitive via Tiptap CLI

```bash
npx @tiptap/cli@latest add separator
```

## Usage

```tsx
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 |