Separator

Visual divider via Radix UI

Horizontal

Usage

import { Separator } from '@tryvienna/ui'

<div className="w-80">
  <div className="text-sm font-medium">Section One</div>
  <Separator className="my-4" />
  <div className="text-sm font-medium">Section Two</div>
</div>

Examples

Horizontal

Horizontal

<div className="w-80">
  <div className="text-sm font-medium">Section One</div>
  <Separator className="my-4" />
  <div className="text-sm font-medium">Section Two</div>
</div>

Vertical

Vertical

<div className="flex h-6 items-center gap-4">
  <span className="text-sm">Blog</span>
  <Separator orientation="vertical" />
  <span className="text-sm">Docs</span>
  <Separator orientation="vertical" />
  <span className="text-sm">Source</span>
</div>

API Reference

Separator

Prop	Type	Default	Description
orientation	"horizontal" | "vertical"	horizontal
decorative	boolean	true

Also accepts all props from SeparatorPrimitive.Root.

Data Attributes

Component	data-slot
Separator	"separator"