Separator

A visual divider for separating content horizontally or vertically.

Preview

Horizontal

Zostel Manali

A backpacker's paradise in the Himalayas

WiFi
Cafe
Bonfire
Treks

Usage

tsx
import { Separator } from "zostel-ui";

{/* Horizontal (default) */}
<Separator />

{/* Vertical */}
<div className="flex items-center h-8 gap-4">
  <span>Hostels</span>
  <Separator orientation="vertical" />
  <span>Homes</span>
</div>

{/* Decorative */}
<Separator decorative />

Props

orientation
Type: "horizontal" | "vertical"
Default: "horizontal"

Direction of the separator line

decorative
Type: boolean
Default: false

Whether the separator is purely decorative (no semantic meaning)

className
Type: string
Default: —

Additional CSS classes
Previous Badge Next Table