Separator
A visual divider that separates content horizontally or vertically.
Overview
The Separator component provides a visual divider to separate content sections. It can be oriented horizontally or vertically and is built on Base UI primitives for accessibility.
Usage
import { Separator } from "@tilt-legal/cubitt-components/primitives";// Horizontal separator (default)
<Separator />
// Vertical separator
<Separator orientation="vertical" />Examples
Horizontal
Use a horizontal separator to divide content sections vertically.
import { Separator } from "@tilt-legal/cubitt-components/primitives";
export default function Component() {
return (
<div className="w-full max-w-md space-y-4">
<div>
<h3 className="text-sm font-medium">Section One</h3>
<p className="text-sm text-muted-foreground">
This is the first section of content.
</p>
</div>
<Separator />
<div>
<h3 className="text-sm font-medium">Section Two</h3>
<p className="text-sm text-muted-foreground">
This is the second section of content.
</p>
</div>
</div>
);
}Vertical
Use a vertical separator to divide content sections horizontally.
import { Separator } from "@tilt-legal/cubitt-components/primitives";
export default function Component() {
return (
<div className="flex items-center gap-4 h-12">
<span className="text-sm">Item One</span>
<Separator orientation="vertical" />
<span className="text-sm">Item Two</span>
<Separator orientation="vertical" />
<span className="text-sm">Item Three</span>
</div>
);
}API Reference
Separator
A visual divider for separating content.
| Prop | Type | Default | Description |
|---|---|---|---|
orientation | "horizontal" | "vertical" | "horizontal" | The orientation of the separator. |
className | string | — | Additional CSS classes for the separator. |