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.

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" />

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".