Layout Separator

Separator

A quiet line between things — across, or between words.

Preview

Zostel Manali

Walk the deodar woods to Hadimba. Then go higher.

WALK

CLIMB

RISE

Usage

tsx

import { Separator } from "zostel-ui";

<Separator className="my-4" />
<div className="flex h-5 items-center gap-4">
  <span>WALK</span>
  <Separator orientation="vertical" />
  <span>CLIMB</span>
</div>

Props

Prop	Type	Default	Description
`orientation`	`"horizontal" \| "vertical"`	`"horizontal"`	Which way it runs.
`decorative`	`boolean`	`true`	Hidden from screen readers (set false if it separates real sections).
`className`	`string`	—	More classes, merged with the component’s own (tailwind-merge).

orientation

Type: "horizontal" | "vertical"

Default: "horizontal"

Which way it runs.

decorative

Type: boolean

Default: true

Hidden from screen readers (set false if it separates real sections).

className

Type: string

Default: —

More classes, merged with the component’s own (tailwind-merge).