- Button
- Date Picker
- Field
- Fields
- Input Group
- File Uploader
- Signature Pad
- Text Area
- Container
- Section Header
- Separator
- Spacer
- Action Row
- Breadcrumb
- Tabs
- Tabs Container
- Card
- Image
- Text
- Title
- Video Player
- Card Collection
- Data Grid
- List Collection
- Table Collection
- Bar Chart
- Big Number
- Line Chart
- Radial Chart
- Hint
- Progress
- Spinner
- Skeleton
- Toast
- Sheet
- Dialog
- Real-world patterns
- Primitives
An invisible utility component that creates consistent, responsive spacing between elements. Unlike margin and padding utilities, Spacer provides a declarative way to manage whitespace as a standalone element in your layout.
Basic Usage
The Spacer component creates vertical space by default. It's invisible but takes up space in the layout.
First Section
Second Section
Size Options
Choose from seven predefined sizes to create consistent spacing throughout your application.
Content Block
Extra Small (xs) - 8px
Small (sm) - 16px
Medium (md) - 32px
Large (lg) - 48px
Extra Large (xl) - 64px
2XL - 96px
3XL - 128px
Responsive Spacing
Use the responsive prop to adjust spacing at different breakpoints. Perfect for maintaining optimal spacing across device sizes.
Mobile Header
The spacing below this section changes based on screen size: small on mobile, large on desktop.
Responsive Content
Try resizing your browser to see the spacing change.
Horizontal Spacing
Use axis="horizontal" to create horizontal space between inline or flex items.
Vertical Spacing (Default)
The axis="vertical" prop creates vertical space, which is the default behavior.
Top Section
Bottom Section
Form Sections
Spacer is particularly useful for creating consistent spacing between form sections.
Page Sections
Create clear visual separation between major page sections.
Hero Section
Welcome to our application
Features
Discover what makes us unique
Testimonials
Hear from our satisfied customers
Props
| Prop | Type | Default | Description |
|---|---|---|---|
size | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "md" | The size of the spacing |
axis | "horizontal" | "vertical" | "both" | "both" | Direction of spacing - vertical creates height, horizontal creates width, both creates a square |
responsive | { sm?, md?, lg?, xl? } | - | Responsive size overrides at different breakpoints |
className | string | - | Additional CSS classes to apply |
Size Scale
| Size | Pixels | Use Case |
|---|---|---|
xs | 8px | Minimal spacing between tightly related elements |
sm | 16px | Compact spacing, dense layouts |
md | 32px | Default spacing for most use cases |
lg | 48px | Comfortable spacing between sections |
xl | 64px | Large spacing for major sections |
2xl | 96px | Extra large spacing, hero sections |
3xl | 128px | Maximum spacing for dramatic separation |
Responsive Breakpoints
The responsive prop accepts size values for these breakpoints:
sm: 640px and upmd: 768px and uplg: 1024px and upxl: 1280px and up
Example:
<Spacer
size="sm" // 16px on mobile
responsive={{
sm: "md", // 32px on small screens
md: "lg", // 48px on medium screens
lg: "xl", // 64px on large screens
xl: "2xl" // 96px on extra large screens
}}
/>