Components

Separator

A hairline between groups of content, across or upright.

September 2026

Budgets, entries and goals

Spent $2,742

Left $1,258

12 entries

Import

import { Separator } from '@rinzai/zen';

Examples

Stats

Upright between figures in a card: it takes the row's height, so it spans each label and value.

Income$6,200

Spent$4,180

Saved$2,020

API reference

<Separator>

A hairline between groups of content, across (the default) or upright (orientation="vertical", e.g. between toolbar buttons; it takes its container's height). Screen readers hear it only when it divides something meaningful: pass decorative for one that's just visual.

Prop	Type	Default
`decorative` Only visual: hidden from screen readers.	`boolean`	`—`
`orientation`	`"horizontal" \| "vertical"`	`horizontal`