Spacer
UtilitiesA utility component for adding consistent spacing between elements. Supports horizontal, vertical, and flex-based spacing.
Import
import {
Spacer,
SpacerXS, SpacerSM, SpacerMD, SpacerLG, SpacerXL,
FlexSpacer
} from "@/components/ui/spacer";Usage
Vertical Spacing
Add space between stacked elements
Element 1
Element 2 (16px gap)
Element 3 (32px gap)
Horizontal Spacing
Add space between inline elements
Item 1
Item 2
Item 3
Preset Spacers
Pre-configured spacing sizes
Element
SpacerXS (8px)
SpacerSM (16px)
SpacerMD (24px)
SpacerLG (32px)
SpacerXL (48px)
Flex Spacer
Take up remaining space in a flex container
Left
Right
FlexSpacer takes up remaining space, pushing elements apart
Spacing Scale Reference
Available spacing multipliers
| Multiplier | Pixels | REM | Visual |
|---|---|---|---|
| 1 | 4px | 0.25rem | |
| 2 | 8px | 0.5rem | |
| 3 | 12px | 0.75rem | |
| 4 | 16px | 1rem | |
| 6 | 24px | 1.5rem | |
| 8 | 32px | 2rem | |
| 10 | 40px | 2.5rem | |
| 12 | 48px | 3rem | |
| 16 | 64px | 4rem |
API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
x | number | undefined | Horizontal spacing multiplier (base: 4px) |
y | number | undefined | Vertical spacing multiplier (base: 4px) |
className | string | undefined | Additional CSS classes (e.g., flex-1 for flex spacer) |