Logo

Midnight Owl UI

Divider

Stable v1.0.2

A line to separate content, with optional text or an icon sitting in the middle of it. Works horizontally or vertically.

Interactive Playground

Combine every prop live and copy the resulting code.

Structure
Horizontal
Center
Style
Solid
Neutral (unset)
Content
Small (sm)
Section
Live Source Code
<Divider>Section</Divider>

Sizes & Thickness

Control the physical stroke weight using the size prop. The embedded text typography automatically scales to match the divider's visual weight.

Extra Small (1px)
Small (2px)
Medium (4px)
Large (8px)
Extra Large (16px)
Template
<Divider size="xs">Extra Small</Divider>
<Divider size="sm">Small</Divider>
<Divider size="md">Medium</Divider>
<Divider size="lg">Large</Divider>

Line Variants

Change the visual stroke style using the variant prop. (Size md is used here to emphasize the mathematically perfect dots and dashes).

Solid (Default)

Dashed (4:2 Ratio)

Dotted (1:3 Ratio)

Template
<Divider size="md" />
<Divider variant="dashed" size="md" />
<Divider variant="dotted" size="md" />

Severities & Colors

Assign semantic meaning using the severity prop. The divider line and its inner content will automatically synchronize to the chosen theme color.

Primary Section
Approved
Client Details
Warning Zone
Danger Zone
Information
Template
<Divider severity="primary">Primary Section</Divider>

<Divider severity="success" variant="dashed">
  <Icon icon="lucide:check-circle-2" /> Approved
</Divider>

<Divider severity="danger" size="md">
  <Icon icon="lucide:alert-triangle" /> Danger Zone
</Divider>

Content Alignment

Embed text or icons directly inside the default slot. Use the align prop to position the content.

Left Aligned
Center Aligned
Right Aligned
Template
<Divider align="left">Left Aligned</Divider>

<Divider align="center">Center Aligned</Divider>

<Divider align="right">Right Aligned</Divider>

<Divider align="center" variant="dashed">
  <Icon icon="lucide:star" class="text-warning" />
</Divider>

Vertical Layout

Use layout="vertical" to separate columns. Note that the parent container must have a defined height.

Origin

Port of Manila

Destination

Singapore

Template
<div class="flex items-center">
  <div>Column 1</div>

  <Divider layout="vertical" variant="dashed" severity="primary">
    <Icon icon="lucide:ship" />
  </Divider>

  <div>Column 2</div>
</div>

API Reference

Props

Name
Type / Signature
Default
Description
layout
"horizontal" | "vertical"
"horizontal"
Orientation of the dividing line.
align
"left" | "center" | "right" | "top" | "bottom"
"center"
Position of embedded slot content along the line.
variant
"solid" | "dashed" | "dotted"
"solid"
Stroke style of the line.
severity
"primary" | "secondary" | "success" | "warning" | "danger" | "info"
undefined
Semantic color of the line and embedded text. Falls back to a neutral border/muted text when unset.
size
"xs" | "sm" | "md" | "lg" | "xl"
"sm"
Stroke thickness and embedded text scale.

Slots

Slot Name
Exposed Bindings
Description
default
-
Optional embedded text or icon content rendered inline with the divider line.