Components

Divider

It's just a line.

Default

This text is placed over

This text is placed under

Vue

<script setup lang="ts">
import { Divider } from "opui-css/vue"
</script>

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

Output

<!--[-->
This text is placed over
<hr class="ui-divider" />
This text is placed under
<!--]-->

Variants

Tonal

Filled

Primary

Vue

<script setup lang="ts">
import { Divider } from "opui-css/vue"
</script>

<template>
  Tonal
  <Divider variant="tonal" />

  Filled
  <Divider variant="filled" />

  Primary
  <Divider variant="primary" />
</template>

Output

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

API

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

Installation

divider.css

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

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

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

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