Spacer

Utilities

A 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
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

Responsive Spacing Tips

Strategies for adaptive spacing across screen sizes

Use Tailwind classes for responsive behavior

Header

Content (smaller gap on mobile)

FlexSpacer for navigation

Logo

ProductsAbout

API Reference

xundefined

number

Horizontal spacing multiplier (base: 4px)

yundefined

number

Vertical spacing multiplier (base: 4px)

classNameundefined

string

Additional CSS classes (e.g., flex-1 for flex spacer)

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)

Divider