components

Divider

Dividers are thin visual separators that organize content into distinct sections. They can be oriented horizontally or vertically and support configurable spacing.

Import

import { Divider } from "@skedulo/breeze-ui-react";

Usage Guidance

When to use

+Visually separate sections of content.
+Create clear boundaries between groups of related items.
+Add structure to dense layouts.

When not to use

−When spacing alone provides sufficient separation.
−Inside Cards — card boundaries already provide visual structure.
−Between every single list item — use subtle spacing instead.

Examples

Code Samples

Horizontal

A horizontal divider separating stacked content. This is the default orientation.

import { Divider } from "@skedulo/breeze-ui-react";

export default function HorizontalDivider() {
  return (
    <div>
      <p>Content above the divider</p>
      <Divider />
      <p>Content below the divider</p>
    </div>
  );
}

Spacing Variants

Dividers support none, small, medium, and large spacing options to control the gap around the line.

import { Divider } from "@skedulo/breeze-ui-react";

export default function DividerSpacing() {
  return (
    <div>
      <p>No spacing</p>
      <Divider spacing="none" />
      <p>Small spacing</p>
      <Divider spacing="small" />
      <p>Medium spacing (default)</p>
      <Divider spacing="medium" />
      <p>Large spacing</p>
      <Divider spacing="large" />
      <p>End</p>
    </div>
  );
}

Vertical

A vertical divider separating side-by-side content. The parent container must have a defined height.

import { Divider } from "@skedulo/breeze-ui-react";

export default function VerticalDivider() {
  return (
    <div className="flex items-center h-12">
      <span>Left</span>
      <Divider orientation="vertical" spacing="medium" />
      <span>Center</span>
      <Divider orientation="vertical" spacing="medium" />
      <span>Right</span>
    </div>
  );
}

Guidelines

Do

✓Use sparingly to avoid visual clutter.
✓Combine with spacing for clean section breaks.

Don't

✗Don't overuse dividers — whitespace is often enough.
✗Don't use dividers as decorative elements.

API Reference

Prop	Type	Default	Description
orientation	"horizontal" \| "vertical"	"horizontal"	The direction of the divider line.
spacing	"none" \| "small" \| "medium" \| "large"	"medium"	Controls the amount of margin above and below (or left and right for vertical) the divider.

Related Components

Card Tabs