Separator

Layout
Utility

Visual divider for separating content sections. Supports horizontal and vertical orientations with solid, dashed, and dotted variants.

Preview

Horizontal separator between content sections

Eidetic Design System

A comprehensive component library

Components

Over 100 production-ready components

Variants

Different visual styles for separators

Default (Solid)

Dashed

Dotted

Vertical Separator

Divide content horizontally with vertical lines

DashboardOverview
AnalyticsReports
SettingsPreferences

In Menus

Separate menu sections

Props

Separator component API reference

PropTypeDefaultDescription
orientation'horizontal' | 'vertical''horizontal'Direction of the separator line
variant'default' | 'dashed' | 'dotted''default'Visual style of the separator
decorativebooleantrueIf true, separator has no ARIA role (purely visual)
classNamestring—Additional CSS classes
...propsHTMLAttributes<HTMLDivElement>—All standard div attributes are supported

Usage

Import and implementation example

import { Separator } from '@/components/ui/separator'

export default function Example() {
  return (
    <>
      {/* Horizontal (default) */}
      <div>
        <p>Section 1</p>
        <Separator />
        <p>Section 2</p>
      </div>

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

      {/* Variants */}
      <Separator variant="default" />
      <Separator variant="dashed" />
      <Separator variant="dotted" />

      {/* Custom spacing */}
      <Separator className="my-4" />

      {/* Semantic separator (not decorative) */}
      <Separator decorative={false} />
    </>
  )
}

Features

Built-in functionality

  • Two orientations: Horizontal and vertical layout options
  • Multiple variants: Solid, dashed, and dotted line styles
  • Decorative mode: Option to exclude from accessibility tree
  • Customizable: Override styles with className
  • Forward ref: Supports ref forwarding for DOM access
  • Dark mode: Adapts to light and dark themes

Accessibility

ARIA support and semantic roles

ARIA Attributes

role="separator" when decorative={false}role="none" when decorative={true}aria-orientation for vertical separators

Keyboard Navigation

KeyAction
N/ASeparator is not interactive

Notes

  • Use decorative={false} for meaningful content divisions
  • Keep decorative={true} for purely visual separators
  • Separator does not trap focus or interfere with navigation

Related Components

ResizableCardDropdownMenu