Delphi Design

A separator component for dividing content.

Orientations

Horizontal

Content above

Content below

Vertical

Left

Right

Usage

import { Separator } from "@delphi/ui";

export function Example() {
  return (
    <div>
      <p>Above</p>
      <Separator className="my-4" />
      <p>Below</p>
    </div>
  );
}

API Reference

Prop	Type	Default	Description
`orientation`	`"horizontal" \| "vertical"`	`"horizontal"`	Direction of the separator
`decorative`	`boolean`	`true`	Whether the separator is purely visual

Use separators to group related content visually

Set decorative={false} and add aria-label for meaningful divisions

Use consistent spacing around separators

Use vertical separators in toolbars or inline layouts

Keep separators subtle — they shouldn't compete with content

Overuse separators — whitespace often works better

Use separators where margins or padding would suffice

Make separators too prominent with heavy colors or thickness

Use separators inside components that already have visual boundaries