Divider

Installation#

# One-time setup (tokens + lib helpers)
npx koalaui-cli@latest init

# Add this component (its dependencies come along)
npx koalaui-cli@latest add divider

Usage#

import { Divider } from "@/components/ui/divider"

export function Example() {
  return (
    <div>
      <p>Above</p>
      <Divider />
      <p>Below</p>
    </div>
  )
}

Smart by default#

A divider only earns its space when it actually separates two things. By default it auto-collapses when it would be orphaned: at the very start or end of a group, doubled against another divider, or stranded next to content that filtered or rendered away. So you can drop a <Divider /> after every row without guarding it: a dynamic list never shows a rule at the edge, and the empty state stays clean. Toggle the rows below, then flip static to switch the guarantee off and watch the orphaned trailing rule reappear.

The contract is the idiomatic one: absent content renders null (or carries the hidden attribute), so a neighbour that is gone is gone from the layout too. Where the dividers are the content themselves (a showcase), or a leading or trailing rule is intentional, pass static to opt out.

Variants#

Four stroke styles. solid, dashed, and dotted ride the border-* utilities; gradient fades a hairline out at both ends for a softer separation between large surfaces. The gallery pins each rule with static so every stroke shows at once; on its own a Divider is smart by default.

With label#

Pass children to render a centered label between two lines, ideal for an “OR” separator in auth forms. The label is text or an icon; the flanking lines are aria-hidden so the a11y tree still exposes exactly one separator.

Label position#

labelPosition sets where the label sits. start and end drop the line on that side so the label hugs the edge.

Vertical#

Set orientation="vertical" to separate inline content. The divider stretches to the height of its container, so place it in a flex row. Vertical dividers don't take a label.

FAQ#