Divider

Horizontal or vertical separator for grouping content.

Introduction

Dividers separate related groups of content with a thin line. Use them between sections, list groups, or inline items in a toolbar.

When to use: Visually split blocks of content when whitespace alone is not enough hierarchy, or separate inline actions in a horizontal row.

Compared to similar components:

List — Presents a continuous index of rows. Place a Divider between sections or groups when you need a stronger break than ListSection alone.
Card — Groups related content in a surface. Use Divider inside a Card body to split subsections without nesting more Cards.
Menu — Floating action panel. Dividers often sit between groups of menu items.

Use the framework selector in the site header to switch between React and Vue.

Import

import { Divider } from "@bridge-ui/vue/Components/Divider";

import { Divider } from "@bridge-ui/react/Components/Divider";

Basic usage

By default, Divider renders a full-width horizontal rule between stacked content.

<script setup lang="ts">
import { Divider } from "@bridge-ui/vue/Components/Divider";
</script>

<template>
  <div
    class="text-dark-700 dark:text-dark-200 flex w-full flex-col gap-4 text-sm"
  >
    <p>Section one</p>
    <Divider />
    <p>Section two</p>
  </div>
</template>

import { Divider } from "@bridge-ui/react/Components/Divider";

export default function DividerBasic() {
  return (
    <div className="text-dark-700 dark:text-dark-200 flex w-full flex-col gap-4 text-sm">
      <p>Section one</p>
      <Divider />
      <p>Section two</p>
    </div>
  );
}

Vertical

Set orientation="vertical" for a separator in a horizontal flex row. The parent needs a defined height (or stretchable siblings) so the vertical line can size correctly.

<script setup lang="ts">
import { Divider } from "@bridge-ui/vue/Components/Divider";
</script>

<template>
  <div
    class="text-dark-700 dark:text-dark-200 flex h-8 items-center gap-4 text-sm"
  >
    <span>Left</span>

    <Divider orientation="vertical" />

    <span>Right</span>
  </div>
</template>

import { Divider } from "@bridge-ui/react/Components/Divider";

export default function DividerVertical() {
  return (
    <div className="text-dark-700 dark:text-dark-200 flex h-8 items-center gap-4 text-sm">
      <span>Left</span>

      <Divider orientation="vertical" />

      <span>Right</span>
    </div>
  );
}

Colors

Use the color prop to convey semantic meaning. Available colors: primary, secondary, success, info, warning, error, and dark. The default is dark.

<script setup lang="ts">
import { Divider } from "@bridge-ui/vue/Components/Divider";
</script>

<template>
  <div class="flex w-full flex-col gap-4">
    <Divider color="primary" />
    <Divider color="secondary" />
    <Divider color="success" />
    <Divider color="info" />
    <Divider color="warning" />
    <Divider color="error" />
    <Divider color="dark" />
  </div>
</template>

import { Divider } from "@bridge-ui/react/Components/Divider";

export default function DividerColors() {
  return (
    <div className="flex w-full flex-col gap-4">
      <Divider color="primary" />
      <Divider color="secondary" />
      <Divider color="success" />
      <Divider color="info" />
      <Divider color="warning" />
      <Divider color="error" />
      <Divider color="dark" />
    </div>
  );
}

Customization

Fine-tune appearance with className (React) or class (Vue), and the classes prop to target the root element—for example, thickness or fill color.

<script setup lang="ts">
import { Divider } from "@bridge-ui/vue/Components/Divider";
</script>

<template>
  <Divider
    class="my-2"
    :classes="{
      root: 'h-0.5 bg-primary-500 dark:bg-primary-400',
    }"
  />
</template>

import { Divider } from "@bridge-ui/react/Components/Divider";

export default function DividerCustomization() {
  return (
    <Divider
      className="my-2"
      classes={{
        root: "h-0.5 bg-primary-500 dark:bg-primary-400",
      }}
    />
  );
}

Accessibility

Divider sets role="separator" and aria-orientation to match the orientation prop.
Prefer semantic structure (headings, list sections) over Dividers alone when separating meaning for assistive technology.
Decorative spacing between unrelated regions may not need a Divider; whitespace is often enough.

Anatomy

Divider renders a single <hr> root:

<hr class="divider-root" role="separator" aria-orientation="horizontal" />

Card, List, Menu

API

Prop	Type	Default	Description
classes	DividerClasses	—	Classes for root.
color	DividerColor	"dark"	Fill color.
orientation	DividerOrientation	"horizontal"	Horizontal or vertical layout.