Add this component

npx zentauri-ui add divider

Accessibility notes

Keyboard accessible by default with semantic markup, visible focus treatment, and tokenized states. Add descriptive labels for icon-only or decorative usage.

Dependency notes

Static imports do not pull framer-motion. Use the animated entry only when you want motion and have framer-motion installed.

Layout

Dividers for layout separation

Dividers add low-noise separation between stacked sections, split panes, and list rows. Ideal for React settings pages and Next.js admin shells that need structure without heavy chrome.

Primary

Examples

Vertical divider between two columns.

Left

Right

Divider variants playground

Pick an appearance, orientation, size, and label to preview the divider live. Toggle Show output / Show code and the snippet updates to match the selected variant.

Appearance

Orientation

Size

Label

Section

All appearances

Every shipped appearance token at a glance. Click any swatch to load it into the playground above.

Divider API

Generated from the package prop types and variant definitions.

Divider

DividerProps

Variants

Prop	Type	Default
appearance	`amberaquabluecrimsoncyandefaultdestructiveelectricemeraldforestghostgradient-blue`+35	default
orientation	`horizontalvertical`	horizontal
size	`lgmdsm`	md

Behavior

Prop	Type	Default
labelOptional label between divider lines.	`ReactNode`	none

Content

Prop	Type	Default
children	`ReactNode`	none

Inherited HTML props

Prop	Type	Default
className	`string \| undefined`	none
id	`string \| undefined`	none
onClick	`MouseEventHandler<HTMLDivElement> \| undefined`	none
style	`CSSProperties \| undefined`	none
title	`string \| undefined`	none

DividerVariant

DividerVariantProps

Behavior

Prop	Type	Default
appearance	'default' \| 'ghost' \| 'blue' \| 'cyan' \| 'green' \| 'lime' \| 'mint' \| 'ocean' \| 'sapphire' \| 'lavender' \| 'ruby' \| 'red' \| 'slate' \| 'zinc' \| 'stone' \| 'royal' \| 'electric' \| 'forest' \| 'sunset' \| 'magenta' \| 'crimson' \| 'aqua' \| 'plum' \| 'sky' \| 'rose' \| 'purple' \| 'pink' \| 'orange' \| 'yellow' \| 'teal' \| 'indigo' \| 'emerald' \| 'gradient-blue' \| 'gradient-green' \| 'gradient-red' \| 'gradient-yellow' \| 'gradient-purple' \| 'gradient-teal' \| 'gradient-indigo' \| 'gradient-pink' \| 'gradient-orange' \| 'gray' \| 'violet' \| 'destructive' \| 'muted' \| 'amber' \| 'primary' \| null \| undefined	none
orientation	`'horizontal' \| 'vertical' \| null \| undefined`	none
size	`'md' \| 'sm' \| 'lg' \| null \| undefined`	none

DividerAnimated

DividerAnimatedProps

animated

Behavior

Prop	Type	Default
animation	`DividerAnimation \| undefined`	none
appearance	'default' \| 'ghost' \| 'blue' \| 'cyan' \| 'green' \| 'lime' \| 'mint' \| 'ocean' \| 'sapphire' \| 'lavender' \| 'ruby' \| 'red' \| 'slate' \| 'zinc' \| 'stone' \| 'royal' \| 'electric' \| 'forest' \| 'sunset' \| 'magenta' \| 'crimson' \| 'aqua' \| 'plum' \| 'sky' \| 'rose' \| 'purple' \| 'pink' \| 'orange' \| 'yellow' \| 'teal' \| 'indigo' \| 'emerald' \| 'gradient-blue' \| 'gradient-green' \| 'gradient-red' \| 'gradient-yellow' \| 'gradient-purple' \| 'gradient-teal' \| 'gradient-indigo' \| 'gradient-pink' \| 'gradient-orange' \| 'gray' \| 'violet' \| 'destructive' \| 'muted' \| 'amber' \| 'primary' \| null \| undefined	none
labelOptional label between divider lines.	`ReactNode`	none
orientation	`'horizontal' \| 'vertical' \| null \| undefined`	none
size	`'md' \| 'sm' \| 'lg' \| null \| undefined`	none

Content

Prop	Type	Default
children	`ReactNode`	none

Inherited HTML props

Prop	Type	Default
className	`string \| undefined`	none
id	`string \| undefined`	none
onClick	`MouseEventHandler<HTMLDivElement> \| undefined`	none
style	`CSSProperties \| undefined`	none
title	`string \| undefined`	none

CSS variable overrides

Divider CSS variables

Override these divider variables on :root, a theme selector, or a component wrapper.

94 variables

Pattern: --zui-<component>-<slot?>-<variant?>-<property>-<state?>-dark?

:root {
  --zui-divider-default-fg: oklch(37.2% 0.044 257.287);
  --zui-divider-muted-fg: oklch(55.4% 0.046 257.417);
  --zui-divider-primary-fg: oklch(52% 0.105 223.128);
  --zui-divider-destructive-fg: oklch(58.6% 0.253 17.585);
  --zui-divider-ghost-fg: oklch(70.4% 0.04 256.788);
  --zui-divider-sky-fg: oklch(58.8% 0.158 241.966);
  --zui-divider-rose-fg: oklch(58.6% 0.253 17.585);
  --zui-divider-purple-fg: oklch(55.8% 0.288 302.321);
  --zui-divider-pink-fg: oklch(59.2% 0.249 0.584);
  --zui-divider-orange-fg: oklch(64.6% 0.222 41.116);
  --zui-divider-yellow-fg: oklch(68.1% 0.162 75.834);
  --zui-divider-teal-fg: oklch(60% 0.118 184.704);
  --zui-divider-indigo-fg: oklch(51.1% 0.262 276.966);
  --zui-divider-emerald-fg: oklch(59.6% 0.145 163.225);
  --zui-divider-gray-fg: oklch(44.6% 0.03 256.802);
  --zui-divider-amber-fg: oklch(66.6% 0.179 58.318);
  --zui-divider-violet-fg: oklch(54.1% 0.281 293.009);
  --zui-divider-gradient-blue-fg: oklch(54.6% 0.245 262.881);
  --zui-divider-gradient-green-fg: oklch(62.7% 0.194 149.214);
  --zui-divider-gradient-red-fg: oklch(57.7% 0.245 27.325);
  --zui-divider-gradient-yellow-fg: oklch(68.1% 0.162 75.834);
  --zui-divider-gradient-purple-fg: oklch(55.8% 0.288 302.321);
  --zui-divider-gradient-teal-fg: oklch(60% 0.118 184.704);
  --zui-divider-gradient-indigo-fg: oklch(51.1% 0.262 276.966);
  --zui-divider-gradient-pink-fg: oklch(59.2% 0.249 0.584);
  --zui-divider-gradient-orange-fg: oklch(64.6% 0.222 41.116);
  --zui-divider-blue-fg: #2563eb;
  --zui-divider-cyan-fg: #0891b2;
  --zui-divider-green-fg: #16a34a;
  --zui-divider-lime-fg: #65a30d;
  --zui-divider-mint-fg: #10b981;
  --zui-divider-ocean-fg: #0284c7;
  --zui-divider-sapphire-fg: #1d4ed8;
  --zui-divider-lavender-fg: #8b5cf6;
  --zui-divider-ruby-fg: #be123c;
  --zui-divider-red-fg: #dc2626;
  --zui-divider-slate-fg: #475569;
  --zui-divider-zinc-fg: #52525b;
  --zui-divider-stone-fg: #57534e;
  --zui-divider-royal-fg: #4338ca;
  --zui-divider-electric-fg: #0ea5e9;
  --zui-divider-forest-fg: #166534;
  --zui-divider-sunset-fg: #ea580c;
  --zui-divider-magenta-fg: #c026d3;
  --zui-divider-crimson-fg: #b91c1c;
  --zui-divider-aqua-fg: #0f766e;
  --zui-divider-plum-fg: #7e22ce;
}

/* Dark theme variables follow the same names with -dark appended. */
.dark {
  --zui-divider-default-fg-dark: oklch(92.9% 0.013 255.508);
  --zui-divider-muted-fg-dark: oklch(55.4% 0.046 257.417);
}

What it does

Orientation props cover row vs column stacks.

Combine with spacing utilities rather than hard-coded margins inside the primitive.

Composition and API

Prefer compound subcomponents instead of one oversized prop bag. Export a small, documented API for your design system.

Do not use dividers as the only way to convey grouping—pair with headings or labels.

Common use cases

Split form sections without adding new headings.
Separate comments from primary content in feeds.
Add subtle breaks between toolbar clusters.
Balance dense tables with horizontal rules.

Accessibility

Keyboard order, focus rings, and ARIA attributes should match production usage. Test with your supported browsers and assistive technologies when semantics are non-trivial.

This preview page exposes a single h1 in the hero for a clean outline.

Next.js integration notes

Colocate examples under the App Router, keep server and client boundaries explicit, and avoid pulling interactive overlays into unexpected server layouts.

Set NEXT_PUBLIC_SITE_URL so canonical and Open Graph URLs resolve on deploy.

FAQ

Does the Divider component work with Next.js App Router?

Yes. Import it like any other React component; keep interactive subtrees in client components when you need hooks or browser APIs, and leave static structure in server components where possible.

Can I customize divider with Tailwind CSS?

Zentauri UI exposes class-friendly variants and slots so you can extend styles with Tailwind utilities without fighting inline styles.

Is this Divider implementation accessible by default?

Primitives follow sensible defaults, but accessibility depends on how you label controls, manage focus, and wire keyboard handlers in your app. Validate critical flows with keyboard-only use and screen readers.