Spacer
Spacer component for adding vertical spacing between elements without visual lines
Basic Usage
The most basic spacer with default size:
Section 1
Section 2
<div>Section 1</div>
<neura::spacer />
<div>Section 2</div>Different Sizes
Spacer supports multiple predefined sizes:
Above: xs spacer
Above: sm spacer
Above: md spacer (default)
Above: lg spacer
Above: xl spacer
Above: 2xl spacer
Last section
<neura::spacer size="xs" /> <!-- h-2 (0.5rem) -->
<neura::spacer size="sm" /> <!-- h-4 (1rem) -->
<neura::spacer size="md" /> <!-- h-6 (1.5rem) - default -->
<neura::spacer size="lg" /> <!-- h-8 (2rem) -->
<neura::spacer size="xl" /> <!-- h-12 (3rem) -->
<neura::spacer size="2xl" /> <!-- h-16 (4rem) -->Size Comparison
Visual comparison of all available sizes:
XS (0.5rem / 8px)
SM (1rem / 16px)
MD (1.5rem / 24px) - Default
LG (2rem / 32px)
XL (3rem / 48px)
2XL (4rem / 64px)
Spacer vs Divider
Understanding when to use Spacer vs Divider:
Spacer - Empty Space
Content section 1
Content section 2
Spacer adds invisible space between elements
Divider - Visual Line
Content section 1
Content section 2
Divider adds a visible line to separate content
Use Cases
Form Layout
Contact Information
Name
Email
Additional Details
Phone
Card Spacing
Card Title 1
Card content goes here.
Card Title 2
Card content goes here.
Component Comparison
Understanding the differences between Spacer, Divider, and Separator:
| Component | Purpose | Visual | Use Case |
|---|---|---|---|
| Spacer | Adds empty vertical space | Invisible (no line) | Spacing between sections, form groups, or cards |
| Divider | Visual separation with a line | Visible line (horizontal or vertical) | Separating distinct content sections with a clear boundary |
| Separator | Visual separation with enhanced styling | Visible line with more styling options | Complex layouts requiring more control over separator appearance |
Best Practices
Do
- Use spacer for adding breathing room between content sections
- Choose appropriate size based on visual hierarchy
- Use spacer within form groups or card layouts
- Use divider when you need a clear visual separation
Don't
- Don't use spacer when you need a visual separator (use divider instead)
- Don't overuse large spacers - maintain consistent spacing rhythm
- Don't use spacer for horizontal spacing (use margin/padding instead)
- Don't mix spacer and divider unnecessarily - choose one approach
Properties
| Property | Type | Default | Description |
|---|---|---|---|
| size | string | default | Spacer size. Values: 'xs' (0.5rem), 'sm' (1rem), 'md' (1.5rem), 'lg' (2rem), 'xl' (3rem), '2xl' (4rem), or 'default' (1.5rem). |
| class | string | - | Additional CSS classes. Default height classes are applied based on size prop. |