Divider
A thin rule that separates content, horizontally or vertically.
Installation
npm install @sipe-team/divider
import '@sipe-team/divider/styles.css';
Usage
A horizontal divider fills the width of its container.
Examples
Orientation
horizontal (default) is a full-width line; vertical is a full-height line, so place it inside a
container that has a height (for example, a flex row).
Right
Color
default is a subtle gray; primary uses the brand cyan; dark is a strong near-black.
Because dark is near-black, it is intended for light surfaces — on a dark background it blends
in. The panel below is kept light so all three colors stay visible regardless of the page theme.
Anatomy
import { Divider } from '@sipe-team/divider';
export default () => <Divider orientation="horizontal" color="default" />;
Renders a single <hr> with aria-orientation set to match orientation.
API Reference
Renders an <hr> and forwards its ref.
| Prop | Type | Default | Description |
|---|---|---|---|
orientation | 'horizontal' | 'vertical' | 'horizontal' | Line direction. horizontal is full-width; vertical is full-height. |
color | 'default' | 'primary' | 'dark' | 'default' | Line color. |
Also accepts every ComponentProps<'hr'> (className, style, …), forwarded to the <hr>.
Override style for custom thickness, dashes, or color.