CleenUI · Layout · Divider

Divider

Horizontal or vertical separator with optional centered label.

storybook.cleenui.com · layout-divider--default
Open in new window

About Divider

Divider creates visual separation between content blocks. The simplest variant is a thin rule across the full width of its container; the more elaborate variant adds a centered label in the middle of the rule ("OR", "Recent", etc.) with the rule flanking it on either side.

Vertical mode separates inline content with a small vertical rule — useful between flexible row items like nav menus and toolbar buttons.

When to use it

  • Separating sections in a long form.
  • "OR" divider between social-login and email-login options.
  • Inline separators in toolbar groups.
  • Section breaks in long-form content.

Common props

Prop
Type
Description
orientation
"horizontal" | "vertical"
Divider direction.
label
string
Centered label rendered on the divider.
spacing
"sm" | "md" | "lg"
Vertical margin (horizontal mode only).
color
string
Override line color.
dashed
boolean
Render as dashed line.
⚡ Already in an AI editor?

Set up CleenUI in your tool.

Skip the manual import — ask your AI agent to build with this component. The Builder skill knows its props, variants, and idioms.

Live demo

See CleenUI running before you talk to us.

Configure a demo environment in about twenty seconds — theme, spacing, the modules you care about, sample data for your industry — then launch the full dashboard in your browser. Nothing to install, no signup.

  • 20 sec setup
  • 15 themes
  • 20 modules
  • 80 industries
Pick a theme to start with