Divider

Layout
Utility

Visual separator with optional label support for horizontal and vertical layouts.

Preview

Basic divider separating content

Content above

Content below

Variants

Solid, dashed, and dotted line styles

Solid (default)

Dashed

Dotted

With Labels

Add text labels in different positions

Center (default)

Start

End

Spacing

Control vertical margin around the divider

Content above

Content below

Content above

Content below

Content above

Content below

Content above

Content below

Vertical Orientation

Use dividers vertically between inline content

HomeProductsAboutContact

Real-world Example

Login form with social sign-in divider

Sign in

Props

Divider component API reference

PropTypeDefaultDescription
variant'solid' | 'dashed' | 'dotted''solid'Line style
orientation'horizontal' | 'vertical''horizontal'Divider direction
spacing'none' | 'sm' | 'md' | 'lg''md'Margin around divider
labelReactNode—Optional label text
labelPosition'start' | 'center' | 'end''center'Label position
classNamestring—Additional CSS classes

Usage

Import and implementation example

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

export default function Example() {
  return (
    <>
      {/* Basic divider */}
      <Divider />

      {/* With variant */}
      <Divider variant="dashed" />
      <Divider variant="dotted" />

      {/* With label */}
      <Divider label="OR" />
      <Divider label="Section" labelPosition="start" />
      <Divider label="More" labelPosition="end" />

      {/* With spacing */}
      <Divider spacing="sm" />
      <Divider spacing="md" />
      <Divider spacing="lg" />

      {/* Vertical orientation */}
      <div className="flex items-center h-12">
        <span>Item 1</span>
        <Divider orientation="vertical" />
        <span>Item 2</span>
      </div>
    </>
  )
}

Features

Built-in functionality

  • Three variants: Solid, dashed, dotted line styles
  • Two orientations: Horizontal and vertical
  • Label support: Optional text with flexible positioning
  • Configurable spacing: None, small, medium, large
  • Semantic HTML: Uses role="separator" for accessibility
  • Flexible sizing: Adapts to container width/height
  • Composable: Works with any layout
  • Dark mode: Full dark mode support

Accessibility

Accessibility considerations

ARIA Attributes

Uses role="separator" for semantic meaningaria-orientation indicates directionDecorative dividers can use aria-hidden

Keyboard Navigation

KeyAction
N/ADivider is not focusable

Notes

  • Screen readers announce separator
  • Labels provide additional context
  • Consider visual-only decorative dividers
  • Maintains document flow

Related Components

SeparatorCardDescription List