Skip to Content
Dashflow Logo

Separator Component

A comprehensive guide to using the Separator component with examples, props, and best practices.

Overview

The Separator component is a visual divider that helps organize content by creating clear boundaries between sections. It can be used horizontally or vertically to improve content structure and readability.

Basic Usage

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


export default function SeparatorExample() {
  return (
    <div className="space-y-4">
      <p>Content above</p>
      <Separator orientation="horizontal" />
      <p>Content below</p>
    </div>
  )
}

Preview: <div class="space-y-4"> <p>Content above</p>

<p>Content below</p> </div>

Props

PropTypeDefaultDescription
orientation'horizontal' | 'vertical''horizontal'The orientation of the separator
color'default' | 'primary' | 'secondary' | 'accent' | 'muted' | 'destructive' | 'success' | 'warning''default'The color theme of the separator
variant'solid' | 'dashed' | 'dotted''solid'The style variant of the separator
size'sm' | 'md' | 'lg''md'The size/thickness of the separator
classNamestring-Additional CSS classes

Examples

Horizontal Separator

<div className="space-y-4">
  <p>First section</p>
  <Separator orientation="horizontal" />
  <p>Second section</p>
</div>

Preview: <div class="space-y-4"> <p>First section</p>

<p>Second section</p> </div>

Vertical Separator

<div className="flex items-center space-x-4">
  <span>Left content</span>
  <Separator orientation="vertical" />
  <span>Right content</span>
</div>

Preview: <div class="flex items-center space-x-4 h-8"> <span>Left content</span>

<span>Right content</span> </div>

Multiple Separators

<div className="space-y-4">
  <p>Section 1</p>
  <Separator orientation="horizontal" />
  <p>Section 2</p>
  <Separator orientation="horizontal" />
  <p>Section 3</p>
</div>

Preview: <div class="space-y-4"> <p>Section 1</p>

<p>Section 2</p>

<p>Section 3</p> </div>

Color Variants

Primary Color

<Separator color="primary" />

Preview:

Secondary Color

<Separator color="secondary" />

Preview:

Accent Color

<Separator color="accent" />

Preview:

Success Color

<Separator color="success" />

Preview:

Warning Color

<Separator color="warning" />

Preview:

Destructive Color

<Separator color="destructive" />

Preview:

Muted Color

<Separator color="muted" />

Preview:

Style Variants

Dashed Separator

<Separator variant="dashed" />

Preview:

Dotted Separator

<Separator variant="dotted" />

Preview:

Solid Separator (Default)

<Separator variant="solid" />

Preview:

Size Variants

Small Separator

<Separator size="sm" />

Preview:

Medium Separator (Default)

<Separator size="md" />

Preview:

Large Separator

<Separator size="lg" />

Preview:

Combined Examples

Colored Dashed Separator

<Separator color="primary" variant="dashed" size="lg" />

Preview:

Vertical Accent Separator

<div className="flex h-32">
  <div className="flex-1">Left content</div>
  <Separator orientation="vertical" color="accent" size="lg" />
  <div className="flex-1">Right content</div>
</div>

Preview: <div class="flex h-32"> <div class="flex-1">Left content</div>

<div class="flex-1">Right content</div> </div>

Common Use Cases

<nav className="space-y-2">
  <a href="#" className="block py-2">Home</a>
  <a href="#" className="block py-2">About</a>
  <Separator orientation="horizontal" />
  <a href="#" className="block py-2">Settings</a>
  <a href="#" className="block py-2">Profile</a>
</nav>

Form Sections

<form className="space-y-6">
  <div>
    <h3 className="text-lg font-semibold">Personal Information</h3>
    <p className="text-gray-600">Enter your personal details</p>
    {/* Form fields */}
  </div>
  
  <Separator orientation="horizontal" />
  
  <div>
    <h3 className="text-lg font-semibold">Contact Information</h3>
    <p className="text-gray-600">Enter your contact details</p>
    {/* Form fields */}
  </div>
</form>

Card Layout

<div className="border rounded-lg p-4 space-y-4">
  <div>
    <h3 className="font-semibold">Card Title</h3>
    <p className="text-gray-600">Card description</p>
  </div>
  
  <Separator orientation="horizontal" />
  
  <div className="flex justify-between">
    <span>Action 1</span>
    <span>Action 2</span>
  </div>
</div>
<div className="flex h-64">
  <div className="flex-1 p-4">
    <h3 className="font-semibold">Main Content</h3>
    <p>Main content area</p>
  </div>
  
  <Separator orientation="vertical" />
  
  <div className="flex-1 p-4">
    <h3 className="font-semibold">Sidebar</h3>
    <p>Sidebar content</p>
  </div>
</div>

Best Practices

1. Appropriate Spacing

Use appropriate spacing around separators for better visual hierarchy.

// ✅ Good - Proper spacing
<div className="space-y-4">
  <p>Content above</p>
  <Separator orientation="horizontal" />
  <p>Content below</p>
</div>

2. Consistent Orientation

Use consistent orientation throughout your application.

// ✅ Good - Consistent horizontal separators
<div className="space-y-4">
  <div>Section 1</div>
  <Separator orientation="horizontal" />
  <div>Section 2</div>
  <Separator orientation="horizontal" />
  <div>Section 3</div>
</div>

3. Semantic Usage

Use separators to create logical content divisions.

// ✅ Good - Semantic divisions
<div className="space-y-6">
  <section>
    <h2>Introduction</h2>
    <p>Introduction content</p>
  </section>
  
  <Separator orientation="horizontal" />
  
  <section>
    <h2>Main Content</h2>
    <p>Main content</p>
  </section>
</div>

4. Accessibility

Ensure proper accessibility with ARIA attributes.

// ✅ Good - Accessible separator
<Separator 
  orientation="horizontal"
  role="separator"
  aria-orientation="horizontal"
/>

5. Visual Hierarchy

Use separators to create clear visual hierarchy.

// ✅ Good - Clear hierarchy
<div className="space-y-4">
  <h1 className="text-2xl font-bold">Page Title</h1>
  <Separator orientation="horizontal" />
  <div className="space-y-2">
    <h2 className="text-lg font-semibold">Section Title</h2>
    <p>Section content</p>
  </div>
</div>

Customization

Custom Styling

You can customize the separator appearance using CSS classes:

<Separator 
  orientation="horizontal"
  className="bg-blue-500 h-0.5"
/>

Different Colors

Use different colors for different contexts:

// Light separator
<Separator orientation="horizontal" className="bg-gray-200" />


// Dark separator
<Separator orientation="horizontal" className="bg-gray-800" />


// Colored separator
<Separator orientation="horizontal" className="bg-blue-500" />

Different Thickness

Use different thicknesses for different emphasis levels:

// Thin separator
<Separator orientation="horizontal" className="h-px" />


// Medium separator
<Separator orientation="horizontal" className="h-0.5" />


// Thick separator
<Separator orientation="horizontal" className="h-1" />

Advanced Usage

Dynamic Separators

Create dynamic separators based on content:

const renderSeparator = (type: 'section' | 'subsection' | 'minor') => {
  switch (type) {
    case 'section':
      return <Separator orientation="horizontal" className="h-1 bg-gray-400" />;
    case 'subsection':
      return <Separator orientation="horizontal" className="h-0.5 bg-gray-300" />;
    case 'minor':
      return <Separator orientation="horizontal" className="h-px bg-gray-200" />;
    default:
      return <Separator orientation="horizontal" />;
  }
};

Conditional Separators

Show separators conditionally:

<div className="space-y-4">
  {items.map((item, index) => (
    <div key={item.id}>
      <div>{item.content}</div>
      {index < items.length - 1 && (
        <Separator orientation="horizontal" />
      )}
    </div>
  ))}
</div>

Responsive Separators

Use different separators for different screen sizes:

<div className="flex flex-col md:flex-row">
  <div className="flex-1 p-4">
    <h3>Content</h3>
  </div>
  
  {/* Horizontal on mobile, vertical on desktop */}
  <Separator 
    orientation="horizontal" 
    className="md:hidden" 
  />
  <Separator 
    orientation="vertical" 
    className="hidden md:block" 
  />
  
  <div className="flex-1 p-4">
    <h3>Sidebar</h3>
  </div>
</div>
  • Divider: For more complex dividers
  • Spacer: For spacing between elements
  • Card: For content containers
  • Box: For simple containers
  • Grid: For layout containers

API Reference

For the complete API reference and advanced usage patterns, see the Separator API documentation.

Edit this page on GitHub
previousScroll Area