---
title: Separator
description: Visually or semantically separates content.
icon: minus
author:
  name: shadcn
  url: https://github.com/shadcn
mode: wide
---

<PoweredBy
  packages={[
    { name: 'Base UI', url: 'https://base-ui.com/react/components/separator' },
    { name: 'Shadcn UI', url: 'https://ui.shadcn.com/docs/components/separator' },
  ]}
/>

### Installation

```package-install
npx shadcn@latest add @redpanda/separator
```

:::info
`decorative` (default `true`) renders the separator as `role="none"` + `aria-hidden`; pass `decorative={false}` for a
semantic `role="separator"`.
:::

<ComponentPreview name="separator-demo" />

## When to use

Separators provide visual or semantic content separation. Use this decision tree:

```mermaid
graph TD;
    A[Need content separation?] --> B{Visual separation only?};
    A --> C[Use spacing/margins];
    B --> D[Use Separator];
    B --> E{Semantic separation needed?};
    D --> F{Horizontal or vertical?};
    E --> G[Use Separator with role];
    F --> H[Default horizontal];
    F --> I[orientation=vertical];

    classDef recommended fill:#4ade80,stroke:#22c55e,stroke-width:2px,color:#000;
    classDef discouraged fill:#fbbf24,stroke:#f59e0b,stroke-width:2px,color:#000;
    classDef decision fill:#60a5fa,stroke:#3b82f6,stroke-width:2px,color:#fff;
    classDef neutral fill:#9ca3af,stroke:#6b7280,stroke-width:2px,color:#fff;

    class D,G,H,I recommended;
    class A,B,E,F decision;
    class C neutral;
```

## Usage

```tsx
import { Separator } from '@/components/ui/separator';
```

```tsx
<Separator />
```

## Variants

The Separator supports three visual weight variants via the `variant` prop, mapping to theme border tokens:

| Variant   | Token              | Description                                 |
| --------- | ------------------ | ------------------------------------------- |
| `default` | `bg-border`        | Standard divider weight (default)           |
| `subtle`  | `bg-border-subtle` | Lighter weight for de-emphasized separation |
| `strong`  | `bg-border-strong` | Heavier weight for emphasized separation    |

```tsx
<Separator variant="subtle" />
<Separator variant="default" />
<Separator variant="strong" />
```

## Orientation

Use `orientation="vertical"` to separate inline content. A vertical separator
stretches to match the height of its flex row automatically — you don't need to
give the container a fixed height. Outside a flex/grid layout, set an explicit
height via `className` (e.g. `className="h-6"`).

:::info
Vertical separators now use `self-stretch` instead of `h-full`. They fill the cross-axis of a flex/grid parent
automatically, but in a plain block container with a fixed height they no longer fill it — set an explicit height
if you relied on the old `h-full` behavior.
:::

<ComponentPreview name="separator-vertical-stretch-demo" />

```tsx
<div className="flex items-stretch gap-4">
  <div>Overview</div>
  <Separator orientation="vertical" />
  <div>Activity</div>
</div>
```

### Parent-hover pattern

Use Tailwind's `group` utility to change separator weight on hover:

```tsx
<div className="group/row">
  <Separator className="group-hover/row:bg-border-strong" />
</div>
```

## Anatomy

The Separator component provides visual content division:

```
Separator
├── Base UI Separator primitive
├── Orientation: horizontal (default) | vertical
├── Variant: default | subtle | strong
├── ARIA role: separator
├── Visual styling: border token-based line
└── Semantic meaning for screen readers
```

## Props

| Prop          | Type                                | Default        | Description                            |
| ------------- | ----------------------------------- | -------------- | -------------------------------------- |
| `variant`     | `"default" \| "subtle" \| "strong"` | `"default"`    | Visual weight of the separator         |
| `orientation` | `"horizontal" \| "vertical"`        | `"horizontal"` | Direction of the separator             |
| `decorative`  | `boolean`                           | `true`         | Whether the separator is purely visual |
| `className`   | `string`                            | —              | Additional CSS classes                 |

<div className="flex flex-row gap-x-3">
  <ExternalLink href="https://base-ui.com/react/components/separator" text="Docs" />
  <ExternalLink href="https://base-ui.com/react/components/separator#api-reference" text="API Reference" />
</div>

## Accessibility

- By default (`decorative={true}`) the separator renders as `role="none"` with `aria-hidden`, so screen readers skip it — appropriate for purely visual dividers.
- Pass `decorative={false}` to render a semantic `role="separator"` with `aria-orientation="horizontal" | "vertical"` when the divider conveys meaning.
- Separators have no keyboard interactions.

## Credits

- We use [Base UI](https://base-ui.com/react/components/separator) for the separator component.
- We take our inspiration from [Shadcn UI](https://ui.shadcn.com/docs/components/separator) for the separator style.