Components

Divider

It's just an <hr>.

Default

This text is placed over

This text is placed under

Astro

---
import { Divider } from "@opui/astro"
---

This text is placed over
<Divider />
This text is placed under

Output

This text is placed over
<hr class="divider" />
This text is placed under

Variants

Tonal

Filled

Primary

Astro

---
import { Divider } from "@opui/astro"
---

Tonal
<Divider variant="tonal" />

Filled
<Divider variant="filled" />

Primary
<Divider variant="primary" />

Output

Tonal
<hr class="divider border-tonal" />
Filled
<hr class="divider border-filled" />
Primary
<hr class="divider border-primary" />

API

Prop	Type	Default	Description
`variant`	`"tonal" \| "filled" \| "primary"`	-	The visual variant of the divider.

Installation

divider.css

@layer components.root {
  :where(hr) {
    background-color: var(--border-color);
    block-size: var(--border-size-1);
    margin-block: var(--size-fluid-3);

    /* Border color */
    &.border-filled {
      background-color: var(--surface-filled);
    }

    &.border-primary {
      background-color: var(--primary);
    }

    &.border-tonal {
      background-color: var(--surface-tonal);
    }
  }
}