Divider
dividerSeparates content with optional text, alignment, dashed styling, or vertical orientation.
Usage
Basic usage
Do not pass children, which is a pure horizontal dividing line that separates the upper and lower sections of content.
Previous paragraph
Next paragraph
<p>Previous paragraph</p>
<Divider />
<p>Next paragraph</p>With text/text position
Pass in children to embed text, and orientation to control text on the left/center/right.
<Divider>Centered title</Divider>
<Divider orientation="left">Latest Update</Divider>
<Divider orientation="right">More</Divider>Dashed line
dashed Switch to dotted line, pure line and with text are both effective.
<Divider dashed />
<Divider dashed>Dotted line separation</Divider>Regular font weight
plain Let the embedded text use regular font weight (one step bolder by default).
<Divider plain>Regular weight title</Divider>Inline vertical separation
type="vertical" Draw vertical lines between elements embedded in a row.
<div className="flex items-center text-sm">
<span>Documentation</span>
<Divider type="vertical" />
<span>Component</span>
<Divider type="vertical" />
<span>About</span>
</div>When to use
Use Divider when a separator needs an embedded label such as "Latest updates" or "More," a dashed style, or an inline vertical line. Use Separator for an unlabeled geometric boundary with ARIA role="separator"; Divider is content-oriented, while Separator provides structural semantics.
Import
import { Divider } from "@hulianui/ui"Props
| Name | Type | Default | Description |
|---|---|---|---|
| type | "horizontal" | "vertical" | "horizontal" | direction. vertical is an inline separation (embedded between a line of text/elements) |
| orientation | "left" | "center" | "right" | "center" | Horizontal position of embedded text (only effective when horizontal + text is present) |
| dashed | boolean | false | dotted line |
| plain | boolean | false | Regular font weight for text (one bold step by default) |
| className | string | — | Extra class name |
Slots
| Slot | Type | Description |
|---|---|---|
| children | ReactNode | Text embedded in the separator; if not passed, it will be a pure separator |
Usage guidelines
orientation affects label placement only when type="horizontal" has children. A type="vertical" divider is an inline line whose height follows the parent line; place it inside a flex row.
Related
Playground
<Divider orientation="center">Separate headers</Divider>