Divider
Divider component for separating content sections with horizontal or vertical lines
Basic Usage
The most basic divider is horizontal by default:
Section 1
Section 2
<div class="space-y-4">
<div>Section 1</div>
<neura::divider />
<div>Section 2</div>
</div>Horizontal Orientation
The horizontal divider is the default orientation. You can specify it with the orientation attribute:
Content Above
Content Below
<neura::divider orientation="horizontal" />Vertical Orientation
Use a vertical divider to separate content horizontally. The vertical divider must be used in a flex container to stretch correctly:
Left Content
Right Content
<div class="flex items-center gap-4 h-32">
<div>Left Content</div>
<neura::divider orientation="vertical" />
<div>Right Content</div>
</div>With Label
Add a label in the center of the divider to create a text-separated section:
Top Section
OR
Bottom Section
<neura::divider label="OR" />Multiple Dividers
Use multiple dividers to organize different content sections:
Section 1
Section 2
Continue
Section 3
<div class="space-y-4">
<div>Section 1</div>
<neura::divider />
<div>Section 2</div>
<neura::divider label="Continue" />
<div>Section 3</div>
</div>Use Cases
Separating Form Sections
Personal Information
Additional Information
Contact Details
Navigation Menu Separator
Content Organization
Article Title
Published on January 1, 2024
This is the introduction paragraph of the article. It provides context and overview of the topic.
Read More
This is the main content section with detailed information about the topic.
Divider vs Separator vs Spacer
Understanding when to use Divider, Separator, or Spacer:
| Component | Purpose | Visual | When to Use |
|---|---|---|---|
| Spacer | Adds empty vertical space | Invisible (no line, just space) | When you need space between elements without a visual separator |
| Divider | Visual separation with a simple line | Visible line (bg-neutral-200) | Most common use case - simple visual separation between sections |
| Separator | Visual separation with enhanced styling | Visible line (bg-neutral-300, more spacing) | When you need more visual weight or specific styling options |
Visual Comparison
Spacer - Empty Space
Section 1
Section 2
No visual line, just empty space
Divider - Simple Line
Section 1
Section 2
Simple visible line separator (bg-neutral-200)
Separator - Enhanced Line
Section 1
Section 2
Enhanced visible line separator (bg-neutral-300, more spacing)
Key Differences
Spacer
- No visual element - just empty space
- Only vertical spacing (height)
- Multiple size options (xs, sm, md, lg, xl, 2xl)
- Use for spacing between sections, forms, or cards
Divider
- Simple visible line (bg-neutral-200)
- Horizontal or vertical orientation
- Optional label support
- Uses
orientationprop - Simpler and more common
Separator
- More visible line (bg-neutral-300, darker)
- Horizontal or vertical orientation
- Optional label support with different styling
- Uses
verticalprop (boolean) - More spacing around the line (mx-1, my-1)
- More complex structure with wrapper elements
- Better for heavier visual separation
Best Practices
✓ Do
- Use dividers to visually separate distinct content sections
- Use short and clear labels to improve readability
- Use vertical dividers in horizontal layouts
- Maintain consistent spacing around dividers
✗ Don't
- Don't use too many dividers - they can make the interface cluttered
- Don't use vertical dividers without a defined height
- Don't place dividers too close to content - maintain appropriate spacing
- Don't use overly long labels in dividers
Properties
| Property | Type | Default | Description |
|---|---|---|---|
| orientation | string | 'horizontal' | Divider orientation. Possible values: 'horizontal', 'vertical' |
| label | string|null | null | Optional text to display in the center of a horizontal divider |