Separator

Horizontal

The default orientation renders a full-width horizontal rule using Visor border tokens.

Vertical

Set orientation="vertical" to render a vertical divider between inline elements.

Label

Pass label to draw a word centred on the rule, with the rule on both sides. Both lines use the same border token as the bare separator. label applies to horizontal separators only.

Theming

The rule colour reads --separator-color, falling back to --border-default. Themes with transparent borders bind components.separator.color so the rule stays visible.

Installation

npx visor add separator

This copies two files into your project:

• components/ui/separator/separator.tsx — the component
• components/ui/separator/separator.module.css — the styles

Usage

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

<Separator />
<Separator orientation="vertical" />
<Separator label="or" />

API Reference

SeparatorProps

No props data available for “separator”.

The component also accepts all standard Radix UI Separator props.

Accessibility

• Built on @radix-ui/react-separator with correct role="separator" semantics.
• Set decorative={false} when the separator conveys meaningful content grouping that screen readers should announce.
• Decorative separators (the default) are hidden from the accessibility tree with role="none".
• A separator with a label is never decorative: it renders role="separator" named by the label, so the word is read. The decorative prop is ignored when label is set.