# Separator

Divide related sections with a horizontal or vertical line.

Separator between a heading and content

[Complete TSX file](/examples/separator/default.tsx)

```tsx
"use client";

import { Separator } from "@/siteplane/components/separator";

export default function Example() {
  return (
    <div className="flex w-full max-w-sm flex-col gap-4 text-sm">
      <div className="flex flex-col gap-1.5">
        <h3 className="font-medium leading-none">Workspace</h3>
        <p className="text-muted-foreground">Shared projects and members</p>
      </div>
      <Separator />
      <p>
        Everyone in this workspace can view and comment on its projects. Owners
        also manage members and billing.
      </p>
    </div>
  );
}
```

## Installation

Complete [one-time setup](/docs/installation/) first.

```bash
pnpm dlx shadcn@4.18.0 add @siteplane/separator
```

With npm: `npx shadcn@4.18.0 add @siteplane/separator`. [Registry JSON](/registry/separator.json) lists source files and dependencies.

## Usage

```tsx
import { Separator } from "@/siteplane/components/separator";

<Separator />;
```

## Vertical

Set `orientation="vertical"` and give the surrounding row a height; the line stretches to fill it.

Vertical separators between items

[Complete TSX file](/examples/separator/vertical.tsx)

```tsx
"use client";

import { Separator } from "@/siteplane/components/separator";

export default function Example() {
  return (
    <div className="flex h-5 items-center gap-4 text-sm">
      <div>Overview</div>
      <Separator orientation="vertical" />
      <div>Activity</div>
      <Separator orientation="vertical" />
      <div>Settings</div>
    </div>
  );
}
```

## Decorative

When the layout already separates the content, such as the rows of a list, use `role="presentation"` so assistive technologies don't announce each line. A `dl` takes only its term and description groups, so a details list with separators is built as a list of rows, as here.

Decorative separators between the rows of a list

[Complete TSX file](/examples/separator/decorative.tsx)

```tsx
"use client";

import { Separator } from "@/siteplane/components/separator";

const details = [
  { label: "Plan", value: "Pro" },
  { label: "Billing period", value: "Monthly" },
  { label: "Next invoice", value: "Oct 1, 2026" },
];

export default function Example() {
  return (
    <ul className="flex w-full max-w-sm flex-col gap-2 text-sm">
      {details.map((detail, index) => (
        <li className="flex flex-col gap-2" key={detail.label}>
          {index > 0 && <Separator role="presentation" />}
          <div className="flex items-center justify-between">
            <span>{detail.label}</span>
            <span className="text-muted-foreground">{detail.value}</span>
          </div>
        </li>
      ))}
    </ul>
  );
}
```

## API reference

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| orientation | horizontal \| vertical | horizontal | Line direction and accessible orientation. |
| role | ARIA role | separator | Use presentation or none to remove separator semantics; aria-orientation is then omitted. |
| className | string | unset | Additional layout or line classes. |

`SeparatorPrimitive` is the Base UI component. Other props, `render`, and refs follow [Base UI Separator](https://base-ui.com/react/components/separator). An explicit `aria-orientation` is preserved for semantic separators.

[Read the installed source](/source/separator).

## Usage notes

A separator has no action and is not focusable by default. Use section headings to name content groups.