---
id: "packages/active-ui/separator"
title: "Separator"
description: "A horizontal or vertical line between two parts of a page, in the package's separator colour."
url: "/packages/active-ui/separator"
locale: "en"
revision: "69d155cec819c225"
---

# Separator

A separator draws a line between two parts: two sections of a card, links in a row. It uses the
`--separator` colour, which is opaque in both themes, so it draws the same line as the rows of a
table and of a dashboard module. It is built on Base UI's separator.

**Example: Horizontal and vertical**

Client: Runs entirely in your browser. Source: `examples/ui/separator.tsx`.

```tsx
// apps/docs/examples/ui/separator.tsx
'use client';

import {Separator} from '@workspace/active-ui/components/primitives/separator';

/**
 * A line between two parts: horizontal between a heading block and what
 * follows, vertical between links in a row.
 */
export default function SeparatorExample() {
  return (
    <div className="w-full max-w-sm">
      <div className="flex flex-col gap-1">
        <h4 className="text-sm font-semibold">Pension scheme 2026</h4>
        <p className="text-muted-foreground text-sm">
          Defined contribution, since 2019
        </p>
      </div>
      <Separator className="my-4" />
      <div className="flex h-5 items-center gap-4 text-sm">
        <a href="#separator-rules">Rules</a>
        <Separator orientation="vertical" />
        <a href="#separator-participants">Participants</a>
        <Separator orientation="vertical" />
        <a href="#separator-documents">Documents</a>
      </div>
    </div>
  );
}
```

## Usage

```tsx
import {Separator} from '@workspace/active-ui/components/primitives/separator';

<Separator className="my-4" />;
<Separator orientation="vertical" />;
```

## Orientation

`orientation`: `horizontal` (default) is a full-width line one pixel high; `vertical` is one pixel
wide and stretches to the height of its row, so give the row a height (`h-5` in the example).

## What your application provides

The spacing around the line, with margin classes.

## Accessibility

The line is a `role="separator"` with its orientation, announced as a boundary between content.
For a line that is only decoration, such as between the items of a list, give it `role="none"`:
inside a list or a listbox, a separator is not allowed.

## API

| Prop | Type | Required | Description |
| --- | --- | --- | --- |
| `orientation` | `Orientation` | no | The orientation of the separator. |
| `render` | `ComponentRenderFn<HTMLProps, SeparatorState> \| ReactElement<unknown, string \| JSXElementConstructor<any>>` | no | Allows you to replace the component's HTML element with a different tag, or compose it with another component.  Accepts a `ReactElement` or a function that returns the element to render. |

> [!NOTE]
> **Based on shadcn/ui**
>
> This page adapts the Separator documentation of shadcn/ui (MIT licence) to
> this package; see [Third-party notices](/third-party-notices).