Separator

Separator is a visual rule that reinforces the boundary between nearby sections or groups. It can run horizontally or vertically.

Use it when spacing alone does not make the relationship clear. A separator should support an existing content structure rather than create the structure by itself.

Installation

pnpm dlx shadcn@latest add http://ui.argv-tech.dev/r/separator.json

Usage

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

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

Orientation

orientation accepts horizontal or vertical and defaults to horizontal. Match the orientation to the direction of the rule, not the direction of the surrounding layout.

Vertical separators need a defined height from themselves or their parent layout. Horizontal separators fill the available width by default.

API Reference

Separator

All other props are forwarded to the Base UI Separator primitive. Use className to control length, spacing, or placement within the surrounding layout.

Accessibility

The primitive is decorative by default because most separators only repeat a boundary that is already visible from the content structure.

Do not use a separator in place of semantic headings, lists, sections, or regions. If a boundary carries meaning, express that meaning in the document structure first.