ComponentsFoundations

Separator

A hairline divider between content: card sections, menu and toolbar groups, the "or" on a sign-in form.

Radix Separator components/separator.tsxtheme · material · accent · density · font

Ayşe Kaya

Account executive · Istanbul office

12 open deals

$184,200 pipeline

Joined 2023

Installation

$ pnpm add @vamos-ui/react

The whole kit as one package — get updates by bumping the version. Add the styles to globals.css: @import "@vamos-ui/react/styles.css";

import { Separator } from "@vamos-ui/react";

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

The label is read as normal text; the lines around it are decorative.

line (default), strong and nav; inset keeps the line off the card edges using --gap.

Dashboard

Posts

Media

Comments

Total items4

Content

Settings

Prop	Type	Default
`orientation` Vertical separators stretch to the parent's height.	`"horizontal" \| "vertical"`	`"horizontal"`
`decorative` Hidden from assistive tech. Set false to announce it as a separator.	`boolean`	`true`
`label` Text in the middle of a horizontal line.	`ReactNode`	`—`
`labelAlign` Where the label sits.	`"start" \| "center" \| "end"`	`"center"`
`tone` Hairline, field-border strength, or for the dark sidebar.	`"line" \| "strong" \| "nav"`	`"line"`
`inset` Inset by --gap (horizontal) or 6 px (vertical).	`boolean`	`false`