Separator
separatorRenders an accessible horizontal or vertical separator with correct geometry.
Usage
Horizontal separation
In the default direction, a horizontal line filling the width is rendered to separate the upper and lower content.
Hulian Design System
Absorption aggregation component library
<div className="w-48">
<p>Hulian Design System</p>
<Separator className="my-3" />
<p>Suction-type aggregation component library</p>
</div>Vertical separation
Use orientation="vertical" to draw vertical lines to the full height inside the flex container.
<div className="flex h-6 items-center gap-3">
<span>Documentation</span>
<Separator orientation="vertical" />
<span>Component</span>
<Separator orientation="vertical" />
<span>Theme</span>
</div>When to use
Use Separator for a purely geometric horizontal or vertical rule with ARIA role="separator", such as structural grouping or menu and list boundaries. Use Divider when the separator needs a label, dashed styling, or left/right label alignment.
Import
import { Separator } from "@hulianui/ui"Props
| Name | Type | Default | Description |
|---|---|---|---|
| orientation | "horizontal" | "vertical" | "horizontal" | Horizontal renders an h-px rule; vertical renders w-px and requires parent height. |
| className | string | — | Additional class name. |
Example
// Horizontal separator
<p>Hulian Design System</p>
<Separator className="my-3" />
<p>Composable component library</p>
// Vertical separator; the parent supplies height
<div className="flex h-6 items-center gap-3">
<span>Documentation</span>
<Separator orientation="vertical" />
<span>Components</span>
</div>Usage guidelines
A vertical Separator supplies only w-px; its height comes from the parent. Give the surrounding row a height such as h-6, or the separator can resolve to zero height and remain invisible.
Related
Playground
Hulian Design System
Absorption aggregation component library
<Separator />