Separator

Visual divider component to separate content sections with 6% opacity of primary text color

Quick Start

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

// Horizontal separator (default)
<Separator />

// Vertical separator in flex container
<div className="flex gap-4">
  <div>Left content</div>
  <Separator orientation="vertical" />
  <div>Right content</div>
</div>

Orientations

Horizontal
1px
orientation="horizontal"
Vertical (in flex)
auto (stretches)
Left
Right
orientation="vertical"
Vertical (fixed height)
24px
Item 1
Item 2
orientation="vertical" className="h-6"

Content Divider

Separate content sections

Props:
{ orientation: "horizontal" }

Section One

First section content goes here

Section Two

Second section content goes here

Menu Divider

Separate menu items with DesignList

Props:
{ orientation: "horizontal" }
Profile
Settings
Logout

Sidebar Layout

Vertical separator in flex layout

Props:
{ orientation: "vertical" }
Main Content
Primary content area
Sidebar
Extra info

Toolbar Groups

Separate toolbar sections with DesignButton

Props:
{ orientation: "vertical" }

Stats Grid

Between stat items

Props:
{ orientation: "vertical" }
1.2K
Followers
847
Following
94
Posts

Card Footer

Separate card sections with DesignCard

Props:
{ orientation: "horizontal" }
Card Title

Main card content goes here

API Reference

PropTypeDefaultDescription
orientation"horizontal" | "vertical""horizontal"Direction of the separator
decorativebooleantrueIf false, adds separator role for accessibility
classNamestring-Custom CSS classes (e.g., margins, fixed height)

Design Specifications

Dimensions
  • Horizontal: 1px height, 100% width
  • Vertical: 1px width, auto height (stretches)
Color
  • color-mix(in srgb, --color-font-primary 6%, transparent)
  • Auto-adapts to light/dark theme
Flex Behavior
  • shrink-0: Won't shrink in flex container
  • self-stretch: Vertical fills flex height
Accessibility
  • decorative=true: No role (visual only)
  • decorative=false: role="separator"

Common Patterns

Vertical separator in flex container
// The separator automatically stretches to fill the container height
<div className="flex gap-4">
  <div className="flex-1">Left content</div>
  <Separator orientation="vertical" />
  <div className="w-64">Right content</div>
</div>
Fixed height vertical separator
// Use className for fixed height in toolbars, navigation
<div className="flex items-center gap-2">
  <DesignButton variant="tertiary" size="small">Button 1</DesignButton>
  <Separator orientation="vertical" className="h-6" />
  <DesignButton variant="tertiary" size="small">Button 2</DesignButton>
</div>
Horizontal separator with custom margins
// Add margin via className for spacing
<DesignCard>
  <DesignCardContent>Content above</DesignCardContent>
  <Separator className="my-4" />
  <DesignCardContent>Content below</DesignCardContent>
</DesignCard>

Usage Guidelines

  • •Uses 6% opacity of --color-font-primary for subtle, theme-aware division
  • •Vertical separators use self-stretch to automatically fill flex container height
  • •For fixed height vertical separators, add className="h-6" (or desired height)
  • •Use decorative={false} when the separator has semantic meaning for screen readers
  • •Color automatically adapts to light/dark theme via CSS variables