# Spacer
**Category**: react
**URL**: https://www.heroui.com/en/docs/react/migration/spacer
**Source**: https://raw.githubusercontent.com/heroui-inc/heroui/refs/heads/v3/apps/docs/content/docs/en/react/migration/(components)/spacer.mdx
> Migration guide for Spacer from HeroUI v2 to v3
***
The Spacer component has been **removed** in HeroUI v3. Use Tailwind CSS margin utilities directly instead.
## Key Changes
### 1. Component Removal
**v2:** `` component from `@heroui/react`
**v3:** Tailwind CSS margin utilities (`ml-*`, `mr-*`, `mt-*`, `mb-*`, `mx-*`, `my-*`)
### 2. Props Mapping
The v2 Spacer component had the following props that map to Tailwind utilities:
| v2 Prop | v3 Equivalent | Notes |
|---------|---------------|-------|
| `x={n}` | `ml-{n}` or `mx-{n}` | Horizontal margin (left or both sides) |
| `y={n}` | `mt-{n}` or `my-{n}` | Vertical margin (top or both sides) |
| `isInline` | `inline-block` or `block` | Display type |
### 3. Spacing Scale
The spacing values in v2 match Tailwind's spacing scale:
- `x={1}` → `ml-1` (0.25rem / 4px)
- `x={2}` → `ml-2` (0.5rem / 8px)
- `x={4}` → `ml-4` (1rem / 16px)
- `y={4}` → `mt-4` (1rem / 16px)
- etc.
## Migration Examples
### Basic Spacing
```tsx
import { Spacer } from "@heroui/react";
{/* Vertical spacing */}
Item 1
Item 2
{/* Horizontal spacing */}
Item 1
Item 2
```
```tsx
{/* Vertical spacing */}
Item 1
Item 2
{/* Horizontal spacing */}
Item 1
Item 2
```
### Using Gap (Recommended)
For flex and grid layouts, using `gap` is often better than Spacer:
```tsx
import { Spacer } from "@heroui/react";
{/* Horizontal layout */}
Item 1
Item 2
{/* Vertical layout */}
```
```tsx
{/* Horizontal layout */}
Item 1
Item 2
{/* Vertical layout */}
```
## Complete Example
```tsx
import { Spacer, Button } from "@heroui/react";
export default function App() {
return (
Title
Description text
);
}
```
```tsx
import { Button } from "@heroui/react";
export default function App() {
return (
Title
Description text
);
}
```
## Spacing Scale Reference
Tailwind CSS spacing scale (matches v2 Spacer values):
| Value | Size | Tailwind Class |
|-------|------|----------------|
| `0` | 0px | `m-0`, `ml-0`, `mt-0`, etc. |
| `px` | 1px | `m-px`, `ml-px`, `mt-px`, etc. |
| `0.5` | 0.125rem (2px) | `m-0.5`, `ml-0.5`, `mt-0.5`, etc. |
| `1` | 0.25rem (4px) | `m-1`, `ml-1`, `mt-1`, etc. |
| `2` | 0.5rem (8px) | `m-2`, `ml-2`, `mt-2`, etc. |
| `3` | 0.75rem (12px) | `m-3`, `ml-3`, `mt-3`, etc. |
| `4` | 1rem (16px) | `m-4`, `ml-4`, `mt-4`, etc. |
| `5` | 1.25rem (20px) | `m-5`, `ml-5`, `mt-5`, etc. |
| `6` | 1.5rem (24px) | `m-6`, `ml-6`, `mt-6`, etc. |
| `8` | 2rem (32px) | `m-8`, `ml-8`, `mt-8`, etc. |
| `10` | 2.5rem (40px) | `m-10`, `ml-10`, `mt-10`, etc. |
| `12` | 3rem (48px) | `m-12`, `ml-12`, `mt-12`, etc. |
| `16` | 4rem (64px) | `m-16`, `ml-16`, `mt-16`, etc. |
| `20` | 5rem (80px) | `m-20`, `ml-20`, `mt-20`, etc. |
## Best Practices
### 1. Use Gap for Flex/Grid Layouts
Instead of Spacer components, use `gap` utilities:
```tsx
// ✅ Recommended
// ❌ Not recommended
```
### 2. Use Space Utilities for Vertical Lists
```tsx
// ✅ Recommended
Item 1
Item 2
Item 3
// Alternative
Item 1
Item 2
Item 3
```
### 3. Use Margin Utilities Directly
Apply margin directly to elements instead of using Spacer:
```tsx
// ✅ Recommended
Content
// ❌ Not recommended
<>
Content
```
## Summary
1. **Component Removed**: `Spacer` component no longer exists in v3
2. **Import Change**: Remove `import { Spacer } from "@heroui/react"`
3. **Use Tailwind Utilities**: Replace with margin utilities (`ml-*`, `mt-*`, `mx-*`, `my-*`)
4. **Use Gap**: Prefer `gap-*` utilities for flex/grid layouts
5. **Use Space**: Prefer `space-y-*` and `space-x-*` for consistent spacing
## Migration Steps
1. **Remove Import**: Remove `Spacer` from `@heroui/react` imports
2. **Replace Spacer**: Replace `` with `ml-{n}` or `mx-{n}` classes
3. **Replace Spacer**: Replace `` with `mt-{n}` or `my-{n}` classes
4. **Use Gap**: For flex/grid layouts, use `gap-{n}` instead of Spacer
5. **Use Space**: For vertical/horizontal lists, use `space-y-{n}` or `space-x-{n}`
## Common Patterns
### Vertical Stack with Spacing
```tsx
// Using space-y utility
Item 1
Item 2
Item 3
```
### Horizontal Row with Spacing
```tsx
// Using gap utility
```
### Custom Spacing Between Specific Elements
```tsx