horizontal_rule

Divider

Visual separator for content sections.

Divider Examples

Copy-ready examples with live previews.

Basic usage

A simple horizontal separator.

Live preview

Section A

Section B

import Divider from "@/_components/divider/Divider";

export default function Example() {
  return (
    <>
      <p>Section A</p>
      <Divider />
      <p>Section B</p>
    </>
  );
}

Variants

Use a variant to change layout or tone.

Live preview

Default

Inset

Tonal

import Divider from "@/packages/ui/src/_components/divider/Divider";

export default function Example() {
  return (
    <div style={{ display: "grid", gap: 12, maxWidth: 520 }}>
      <Divider />
      <Divider variant="inset" />
      <Divider variant="tonal" />
    </div>
  );
}

Custom height

Set the inline height of the <hr />.

• For vertical dividers, height typically controls the visible line length.

• For thick section breaks, combine `variant="tonal"` + a larger height.

Live preview

Hairline (1px)

Thick section break (8px)

import Divider from "@/packages/ui/src/_components/divider/Divider";

export default function Example() {
  return (
    <div style={{ display: "grid", gap: 12, maxWidth: 520 }}>
      <Divider height="1px" />
      <Divider variant="tonal" height="8px" />
    </div>
  );
}

Vertical divider

Use the `vertical` variant in horizontal layouts (toolbars/menus).

Live preview

Overview

Billing

Security

import Divider from "@/packages/ui/src/_components/divider/Divider";

export default function Example() {
  return (
    <div style={{ display: "flex", gap: 12, alignItems: "center" }}>
      <span style={{ padding: "6px 10px" }}>Overview</span>
      <Divider variant="vertical" height="22px" />
      <span style={{ padding: "6px 10px" }}>Billing</span>
      <Divider variant="vertical" height="22px" />
      <span style={{ padding: "6px 10px" }}>Security</span>
    </div>
  );
}

Common patterns

Practical ways to apply dividers in UI composition.

Live preview

Account

Notifications

Privacy

import Divider from "@/packages/ui/src/_components/divider/Divider";

export default function Example() {
  return (
    <div style={{ display: "grid", gap: 0, maxWidth: 520 }}>
      <div style={{ padding: "10px 0" }}>Account</div>
      <Divider variant="inset" />
      <div style={{ padding: "10px 0" }}>Notifications</div>
      <Divider variant="inset" />
      <div style={{ padding: "10px 0" }}>Privacy</div>
    </div>
  );
}

On this page

Divider Props

Divider — Props
Prop	Type	Required	Default	Description
variant	"vertical" \| "inset" \| "tonal"	No	undefined	Adds a variant class to the root element.
height	string	No	undefined	Sets the inline `style.height` of the <hr /> (e.g. "1px", "8px", "24px").