Divider

A visual separator for grouping related content. Supports horizontal and vertical orientations, with an optional centred label for contextual dividers.

Preview

or continue with

Variants

Horizontal — plain

Horizontal — with label

Vertical

Left panel

Right panel

Implementation

Divider.tsx

tsx

import { Divider } from "@/components/ui/Divider";

// Plain horizontal
<Divider />

// With label
<Divider label="or" />
<Divider label="Section heading" />

// Vertical (needs height context)
<div className="flex items-center h-8 gap-4">
  <span>Left</span>
  <Divider orientation="vertical" />
  <span>Right</span>
</div>

Props

Prop	Type	Default	Description
`orientation`	`"horizontal" \| "vertical"`	`"horizontal"`	Renders a horizontal rule or a vertical line. Vertical dividers require the parent to set a height or use flexbox.
`label`	`string`	—	Optional text centred within the divider. Only applies to horizontal orientation.
`className`	`string`	—	Additional classes passed to the root element.

Accessibility

→Horizontal dividers render as <hr role="separator"> — screen readers announce "separator" at the element's position in the DOM.
→Vertical dividers use role="separator" with aria-orientation="vertical".
→When using Divider to separate sections, ensure the surrounding context provides meaning — the divider itself is decorative.
→Avoid relying on the label text alone to communicate section structure; use proper headings for landmark navigation.