Separator

Separator

Markdown

A horizontal or vertical hairline that separates related content, with an optional inline label.

Use Separator when a visible boundary makes adjacent content groups easier to understand. Prefer spacing alone when the grouping is already clear.

Labeled separator

Installation

$npx shadcn@latest add @patchui/separator

The copied source is available in the registry JSON. The canonical implementation lives in packages/react/src/components/separator.tsx.

Usage

<Separator />

Horizontal is the default orientation. Add a label only when words such as or or and clarify the relationship between surrounding choices.

Examples

Vertical separator

A vertical separator inherits height from its parent, so place it in a row with an explicit or content-defined height.

12 drafts
8 published
3 archived
Vertical separator

API reference

PropTypeDefaultDescription
orientation"horizontal" | "vertical""horizontal"Selects a full-width horizontal or full-height vertical hairline.
labelReactNode-Splits a horizontal hairline around inline explanatory text.
decorativebooleanfalseRemoves separator semantics when the boundary is purely visual.

Accessibility

  • Leave decorative={false} when the boundary represents a meaningful change between content sections.
  • Set decorative when spacing and document structure already communicate the relationship and the line is visual reinforcement only.
  • Do not use a separator as a substitute for a heading, fieldset, list, or other semantic grouping.
  • Labeled separators expose their visible label as content; keep it short and relevant.