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 />Examples
Default
A horizontal divider separating two blocks of content.
Variants
Three line styles — solid, dashed, and dotted.
Sizes
Five thickness sizes from xs (1px) to xl (6px).
Tones
Tonal colours — default, subtle, and strong.
With Label
An inline label rendered between two flanking lines, positioned at the start, center, or end.
Vertical
Vertical dividers separating inline items in a flex row.
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.
Date Picker
A button-triggered date picker popover built on Calendar and Base UI Popover. Supports single, range, and multiple selection, preset shortcuts, stacked or sidebar preset layouts, footer slot, and min/max constraints.
Drawer
An accessible slide-in panel built on Base UI Dialog. Compound component pattern with Header, Body, Footer, Title, and Description. Four sides (right, left, top, bottom). Five sizes. Five corner-rounding options. Auto-stacking footer for sheets. LTR and RTL support.