Separator

Workspace

Shared projects and members

Everyone in this workspace can view and comment on its projects. Owners also manage members and billing.

"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

pnpm dlx shadcn@4.18.0 add @siteplane/separator

Complete the one-time setup first. Registry JSON lists source files and dependencies.

Usage

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

<Separator />;

Vertical

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

Overview

Activity

Settings

"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>
  );
}

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.

PlanPro
Billing periodMonthly
Next invoiceOct 1, 2026

"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

Component properties
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. An explicit aria-orientation is preserved for semantic separators.

Read the installed source.

Usage notes

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