A versatile separator component for creating visual boundaries between content sections.

This component provides a flexible solution for visually dividing content across your application. It supports both horizontal and vertical orientations, with optional text labels, making it suitable for various layout patterns and content organization needs.

Usage

The separator provides a subtle visual division between content sections:

<div class="py-2">Content above</div>
<.separator />
<div class="py-2">Content below</div>

Orientation Options

The component supports both horizontal and vertical orientations:

# Default horizontal separator
<.separator />

# Vertical separator for inline content
<div class="flex h-8 items-center gap-4">
  <span>Left</span>
  <.separator vertical />
  <span>Right</span>
</div>

Text Separators

Add text labels to create semantic divisions:

<.separator text="or" />

Customization

The separator can be customized using Tailwind classes while maintaining its core styling:

# Custom spacing
<.separator class="my-8" />

# Full-height vertical separator
<.separator vertical class="mx-4 h-full" />

# Text separator with custom spacing
<.separator text="Section" class="my-6" />

Common Use Cases

Form Sections

Use separators to organize form sections clearly:

<div class="space-y-4">
  <div>Profile Information</div>
  <.separator />
  <div>Account Settings</div>
  <.separator />
  <div>Privacy Options</div>
</div>

Content Groups

Create clear content divisions with labeled separators:

<div class="space-y-4">
  <.separator text="Recent" />
  <div>Recent items...</div>

  <.separator text="Previous" />
  <div>Previous items...</div>
</div>

Inline Elements

Use vertical separators to divide inline elements:

<div class="flex items-center gap-4">
  <span>Profile</span>
  <.separator vertical />
  <span>Settings</span>
  <.separator vertical />
  <span>Logout</span>
</div>