Divider
A thin line that separates content. Horizontal or vertical, solid / dashed / dotted, five thickness sizes, tonal colours, optional inline label, and RTL support.
Playground
Installation
pnpm add @tessinaui/uiUsage
import { Divider } from "@tessinaui/ui";<Divider />Showcase
Variants
| Variant | Description |
|---|---|
solid | Continuous line. Default. |
dashed | Evenly spaced dashes. |
dotted | Fine dotted pattern. |
Orientations
| Orientation | Notes |
|---|---|
horizontal | Spans the full width of its container. Default. |
vertical | Fills the container height; use inside a flex row with a defined height. |
Tones
| Tone | Token | When to use |
|---|---|---|
default | border-border | Standard on light/background surfaces. Default. |
subtle | border/50 | Barely-there separation inside grouped content. |
strong | muted-foreground | Heavier emphasis — section breaks, checkout summaries. |
on-color | white/20 | For placement on bg-foreground / dark surfaces. |
Labels
Pass label (or children) to render text between two flanking lines. Use labelPosition to control where the label sits on the axis.
<Divider label="or" />
<Divider label="Recently" labelPosition="start" />
<Divider label="Archive" labelPosition="end" />Accessibility
By default Divider is decorative — it renders role="none" and isn't announced by screen readers. When the divider has semantic meaning (e.g. separating list sections, form groups), set decorative={false} to emit role="separator" and the correct aria-orientation.
<Divider decorative={false} /> {/* semantic separator */}
<Divider decorative={false} orientation="vertical" /> {/* vertical separator */}RTL
The divider uses logical CSS properties (border-inline-start) so vertical dividers flip correctly in right-to-left layouts. Pass dir="rtl" when you need explicit direction context (e.g. for label alignment).
<Divider label="أو" labelPosition="start" dir="rtl" />API Reference
Divider
| Prop | Type | Default | Description |
|---|---|---|---|
orientation | "horizontal" | "vertical" | "horizontal" | Layout axis |
variant | "solid" | "dashed" | "dotted" | "solid" | Line style |
size | "xs" | "sm" | "md" | "lg" | "xl" | "xs" | Thickness: 1 / 2 / 3 / 4 / 6 px |
tone | "default" | "subtle" | "strong" | "on-color" | "default" | Colour token applied to the rule |
spacing | "none" | "xs" | "sm" | "md" | "lg" | "xl" | "none" | Margin along the orientation axis |
label | ReactNode | — | Inline label between two flanking lines |
labelPosition | "start" | "center" | "end" | "center" | Where the label sits along the axis |
decorative | boolean | true | If false, emits role="separator" + aria-orientation |
dir | "ltr" | "rtl" | — | Text direction |
className | string | — | Extra classes on the root element |
The component extends all standard div HTML attributes.
Carousel
Touch-friendly slider with multiple variants — slide, card/3D, fade, and free-scroll. Built on Embla Carousel with autoplay, loop, RTL, and vertical orientation support.
Scroll Area
A scrollable container with custom overlay scrollbars that do not steal layout space. Supports vertical, horizontal, and both-axis content with a neutral branded thumb, RTL, and a compound API for full control.