Separator

A one-pixel line that divides content, across or upright.

ui.separatorcomponents/ui/separator.tsx

Use case

For the AI

Use it inside one card or panel to split two blocks (an invoice's lines from its totals, two sections of a form), or upright between inline actions (Edit, Share, Delete). It is Base UI's separator, so it carries role="separator" and its orientation for assistive tech.

Use it when

Between two blocks inside the same card or panel
Upright between inline actions or facts on one line
Above a totals line or a footer note

Use something else when

Separating two whole subjects: Card
Grouping several panels under a heading: Frame
Dividing items in a dropdown menu (MenuSeparator): Dropdown menu
Rows of records, which draw their own lines: Table

Examples

Above the line

Edit

Delete

Code

Import

import { Separator } from "@/components/ui/separator"

Usage

export function InvoiceActions() {
  return (
    <div className="grid w-full max-w-sm gap-4 text-[13.5px]">
      <span>Three lines, $4,885.00 before tax</span>
      <Separator />
      <div className="flex h-5 items-center gap-4 text-ink-3">
        <span>Edit</span>
        <Separator orientation="vertical" />
        <span>Share</span>
        <Separator orientation="vertical" />
        <span>Delete</span>
      </div>
    </div>
  )
}

Rules

Horizontal is the default and spans the full width.
orientation="vertical" stretches to the height of its flex row; give the row a height (h-5 in the showcase) or the separator its own h- class.
Its colour is the border token, the same as every hairline in the library.
Menus and tables draw their own dividers; a Separator is for content you lay out yourself.