[ [UI.78] Layout ] Separator

Separator

> Visually or semantically separates content.

Import

[ [0x5B] IMPORT ]

1import { Separator } from "@/components/ui/separator"

Preview

[ [0x00] SEPARATOR ]

> Content above

> Content below

1<div>
2  <div>Content above</div>
3  <Separator />
4  <div>Content below</div>
5</div>

Variants

[ [0x00] HORIZONTAL (DEFAULT) ]

Section 1

Section 2

1<Separator />

[ [0x00] VERTICAL ]

Left

Middle

Right

1<div className="flex items-center gap-4">
2  <div>Left</div>
3  <Separator orientation="vertical" />
4  <div>Right</div>
5</div>

[ [0x00] DECORATIVE ]

Visual separation only

Not announced by screen readers

1<Separator decorative />

[ [0x00] SEMANTIC ]

Section 1

Section 2 (announced by screen readers)

1<Separator decorative={false} />

[ [0x00] IN LIST ]

> Item 1

> Item 2

> Item 3

1<div>
2  <div>Item 1</div>
3  <Separator />
4  <div>Item 2</div>
5  <Separator />
6  <div>Item 3</div>
7</div>

[ [0x00] CUSTOM COLOR ]

Above

Below

1<Separator className="bg-primary" />

[ [0x00] THICKER LINE ]

Above

Below

1<Separator className="h-[2px]" />

[ [0x00] WITH TEXT ]

1<div className="relative">
2  <div className="absolute inset-0 flex items-center">
3    <Separator />
4  </div>
5  <div className="relative flex justify-center text-xs">
6    <span className="bg-background px-2">Or</span>
7  </div>
8</div>

API Reference

[ [0x00] API REFERENCE ]

Prop	Type	Default	Description
orientation	`"horizontal" \| "vertical"`	`"horizontal"`	Direction of the separator.
decorative	`boolean`	`true`	If true, role is 'none'. If false, role is 'separator' with aria-orientation.
className	`string`	`-`	Additional CSS classes for custom styling.

Accessibility

[ [0x58] A11Y ]

Uses proper ARIA roles based on decorative prop
Decorative separators have role='none' (not announced by screen readers)
Semantic separators have role='separator' with aria-orientation
Horizontal separators: h-[1px] w-full
Vertical separators: h-full w-[1px]
Background uses design token (bg-border) for theme support

When to Use

[ [0xE9] USAGE GUIDANCE ]

✓ Use Separator when:

• Dividing distinct content sections within a page or component
• Separating list items visually (menu items, settings options)
• Creating vertical dividers between inline content (toolbar buttons, breadcrumbs)
• Adding visual rhythm to content without semantic section breaks
• Form sections need visual grouping (use with decorative prop)

✗ Don't use when:

• Marking semantic document structure (use HTML section, article tags)
• Creating visual spacing alone (use margin/padding instead)
• Separating major page regions (use Card borders or layout containers)
• Navigation dividers (use proper nav semantics with aria-label)
• Every single content break (overuse reduces visual impact)

Best Practices:

• Default to decorative=true for purely visual separators
• Use decorative=false only when screen readers need section announcement
• Horizontal separators: use in vertical layouts with space-y classes
• Vertical separators: use in flex layouts with flex items-center gap-4
• Customize color with bg-primary or other design tokens (not hardcoded)
• Increase height (h-[2px]) for stronger visual separation
• Combine with text using absolute positioning for "OR" dividers
• Use sparingly - too many separators create visual clutter

Variants

[ [0x00] HORIZONTAL (DEFAULT) ]

Section 1

Section 2

1<Separator />

[ [0x00] VERTICAL ]

Left

Middle

Right

1<div className="flex items-center gap-4">
2  <div>Left</div>
3  <Separator orientation="vertical" />
4  <div>Right</div>
5</div>

[ [0x00] DECORATIVE ]

Visual separation only

Not announced by screen readers

1<Separator decorative />

[ [0x00] SEMANTIC ]

Section 1

Section 2 (announced by screen readers)

1<Separator decorative={false} />

[ [0x00] IN LIST ]

> Item 1

> Item 2

> Item 3

1<div>
2  <div>Item 1</div>
3  <Separator />
4  <div>Item 2</div>
5  <Separator />
6  <div>Item 3</div>
7</div>

[ [0x00] CUSTOM COLOR ]

Above

Below

1<Separator className="bg-primary" />

[ [0x00] THICKER LINE ]

Above

Below

1<Separator className="h-[2px]" />

[ [0x00] WITH TEXT ]

1<div className="relative">
2  <div className="absolute inset-0 flex items-center">
3    <Separator />
4  </div>
5  <div className="relative flex justify-center text-xs">
6    <span className="bg-background px-2">Or</span>
7  </div>
8</div>

Prop

Type

Default

Description

orientation

"horizontal" | "vertical"

"horizontal"

Direction of the separator.

decorative

boolean

true

If true, role is 'none'. If false, role is 'separator' with aria-orientation.

className

string

-

Additional CSS classes for custom styling.

Accessibility

[ [0x58] A11Y ]

Uses proper ARIA roles based on decorative prop
Decorative separators have role='none' (not announced by screen readers)
Semantic separators have role='separator' with aria-orientation
Horizontal separators: h-[1px] w-full
Vertical separators: h-full w-[1px]
Background uses design token (bg-border) for theme support

When to Use

[ [0xE9] USAGE GUIDANCE ]

✓ Use Separator when:

• Dividing distinct content sections within a page or component
• Separating list items visually (menu items, settings options)
• Creating vertical dividers between inline content (toolbar buttons, breadcrumbs)
• Adding visual rhythm to content without semantic section breaks
• Form sections need visual grouping (use with decorative prop)

✗ Don't use when:

• Marking semantic document structure (use HTML section, article tags)
• Creating visual spacing alone (use margin/padding instead)
• Separating major page regions (use Card borders or layout containers)
• Navigation dividers (use proper nav semantics with aria-label)
• Every single content break (overuse reduces visual impact)

Best Practices:

• Default to decorative=true for purely visual separators
• Use decorative=false only when screen readers need section announcement
• Horizontal separators: use in vertical layouts with space-y classes
• Vertical separators: use in flex layouts with flex items-center gap-4
• Customize color with bg-primary or other design tokens (not hardcoded)
• Increase height (h-[2px]) for stronger visual separation
• Combine with text using absolute positioning for "OR" dividers
• Use sparingly - too many separators create visual clutter