Separator

A horizontal or vertical divider between content.

Overview

Separator divides adjacent content. The default is a native hr. A vertical separator is a role="separator" element, because an hr is a horizontal break.

Preview

Customize

Orientation

Installation

Add the component with the CLI. It copies the files in and installs anything they depend on.

npx vinyaas add separator

Usage

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

export function SectionBreak() {
  return <Separator />;
}

Examples

Horizontal

A horizontal rule separates stacked sections.

Account

Billing

Vertical

A vertical separator divides items in a row. It sets aria-orientation so it is not announced as a horizontal rule.

DocsComponents

Grouping

Use separators to group related items without extra headings.

BlogDocsChangelog

In practice

Separators group labeled settings blocks so each section keeps its heading, controls, and actions.

Workspace

Name and default visibility for this project.

Notifications

Choose how this workspace reaches you.

API

Other attributes for the underlying element are passed through.

NameTypeDefaultDescription
orientation"horizontal" | "vertical""horizontal"Horizontal renders an hr. Vertical renders a separator with aria-orientation.
classNamestring—Merged onto the separator with cn.

Accessibility

A horizontal separator is an hr. Its separator role and horizontal orientation come from the element, so the component does not add role or aria-orientation.

  • Vertical sets role="separator" and aria-orientation="vertical".
  • The default vertical line is 16px tall. Override the height with className when the row is taller.