Separator
1px hairline horizontal/vertical divider.
ROUTE PLANSEQUENCE 07 · 4 LEGS
PASS 128ROUTED 92FAIL 3
Source
"use client"
import { Separator } from "@/registry/warren/separator/separator"
export default function SeparatorDemo() {
return (
<div className="flex flex-wrap items-center gap-3">
<div className="flex w-64 flex-col gap-2">
<span className="font-mono text-[10px] uppercase tracking-wide text-muted-foreground">
ROUTE PLAN
</span>
<Separator />
<span className="font-mono text-[10px] uppercase tracking-wide text-foreground">
SEQUENCE 07 · 4 LEGS
</span>
</div>
<div className="flex h-8 items-center gap-3">
<span className="font-mono text-[10px] uppercase tracking-wide text-muted-foreground">
PASS 128
</span>
<Separator orientation="vertical" />
<span className="font-mono text-[10px] uppercase tracking-wide text-primary-text">
ROUTED 92
</span>
<Separator orientation="vertical" />
<span className="font-mono text-[10px] uppercase tracking-wide text-danger-text">
FAIL 3
</span>
</div>
</div>
)
}
Installation
npx shadcn@latest add https://warren.eduard3v.com/r/separator.jsonUsage
import { Separator } from "@/components/ui/separator"<Separator />
<Separator orientation="vertical" />Orientation
horizontal (default) renders a full-width 1px top border; vertical renders a full-height 1px left
border and stretches to its flex container. The divider always uses the border-border hairline tone.
API Reference
Prop
Type