Separator
Visual divider. Horizontal and vertical orientations.
Examples
Horizontal
Full-width horizontal divider.
Section A
Section B
Vertical
Vertical divider between inline elements.
With text label
Separator with a centred label. Used for OR dividers.
OR
In content
Separators used inside a profile card to divide sections.
Installation
pnpm add @rokle/components @rokle/tokensInstalls with the default Rokle brand. Generate a custom brand on rokle.app to use your own colours and personality.
Usage
import { Separator } from "@rokle/components";import { Separator } from "@rokle/components";
export function Example() {
return (
<div>
<p>Content above</p>
<Separator className="my-4" />
<p>Content below</p>
</div>
);
}Source
The implementation source for this component. Copy it into your project and customise.
API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
| orientation | "horizontal" | "vertical" | "horizontal" | Divider direction. |