M
MetricUI
UI

Divider

Themed horizontal or vertical rule with optional centered label or icon.

import { Divider } from "metricui";

Use Divider to visually separate sections of a dashboard with a themed horizontal or vertical rule. Supports optional centered labels, icons, line style variants, accent coloring, and spacing control. Also available as a full-width element inside MetricGrid via its __gridHintof “full”.

Basic Horizontal Divider

Content above

Content below

<Divider />

With Label

Pass a label to render centered text between the two line segments.

Option A

Option B

<Divider label="or" />
<Divider label="Section Break" />

With Icon

Pass an icon to render a React node (e.g. a Lucide icon) centered in the divider. Icon takes precedence over label.

Above

Below

<Divider icon={<Star className="h-3 w-3" />} />

Variants

Choose from solid, dashed, or dotted line styles.

Solid (default)

Dashed

Dotted

<Divider variant="solid" />
<Divider variant="dashed" />
<Divider variant="dotted" />

Accent Mode

Enable accent to color the line and label text with the theme accent color instead of the default muted border.

<Divider accent />
<Divider accent label="Featured" />

Spacing

Control vertical spacing with the spacing prop. Options: none, sm, md (default), lg.

spacing="none"

spacing="sm"

spacing="md" (default)

spacing="lg"

End

<Divider spacing="none" />
<Divider spacing="sm" />
<Divider spacing="md" />
<Divider spacing="lg" />

Vertical Divider

Set orientation="vertical" to render a vertical separator between side-by-side elements.

Left contentRight content
<div className="flex h-16 items-center">
  <span>Left</span>
  <Divider orientation="vertical" />
  <span>Right</span>
</div>

Dense Mode

Enable dense to halve the spacing values. Falls back to the global config.dense setting from MetricProvider.

Normal

Above

Below

Dense

Above

Below

// Normal
<Divider label="Section" />

// Dense
<Divider label="Section" dense />

Props

PropTypeDescription
label
string

Label centered in the divider line.

icon
React.ReactNode

Icon centered in the divider line (replaces label).

orientation
"horizontal" | "vertical"

Divider orientation.

variant
"solid" | "dashed" | "dotted"

Line style.

spacing
"none" | "sm" | "md" | "lg"

Vertical spacing around horizontal dividers / horizontal spacing around vertical dividers. 'none' removes spacing.

accent
boolean

Use accent color for the line instead of muted border color.

dense
boolean

Dense mode — halves spacing values. Falls back to config.dense.

className
string

Additional CSS class names.

id
string

HTML id attribute.

data-testid
string

Test id.

Notes

  • Uses forwardRef — you can pass a ref to the root element.
  • Sets role='separator' and aria-orientation for accessibility.
  • Icon takes precedence over label when both are provided.
  • Grid hint is 'full' — dividers span full width inside MetricGrid.
  • Dense mode halves all spacing values (e.g. md goes from my-4 to my-2).
  • Accent mode colors both the line and any label/icon text.

Playground

Experiment with every prop interactively. Adjust the controls on the right to see the component update in real time.

Live Preview

Content above

Content below

Spacing Comparison

Normal (md)

Above

Below

Dense (md)

Above

Below

Code

<Divider
/>

Props

Adjust props to see the component update in real time