---
url: /api/spacer.md
---
# Spacer
A flexible space that expands to fill available space in its parent container.
## Import
```tsx
import { Spacer } from "silvery"
```
## Usage
```tsx
Left
Right
```
## Props
Spacer has no props. It uses `flexGrow={1}` internally to fill available space.
## Examples
### Push Items to Opposite Ends
```tsx
File.txt
1.2 KB
```
Output:
```
File.txt 1.2 KB
```
### Center an Element
```tsx
Centered Title
```
Output:
```
Centered Title
```
### Header with Left and Right Content
```tsx
function Header({ title, status }: { title: string; status: string }) {
return (
{title}
{status}
)
}
function App() {
return
}
```
Output:
```
┌──────────────────────────────────┐
│ My App Connected │
└──────────────────────────────────┘
```
### Multiple Spacers for Equal Distribution
```tsx
A
B
C
```
Output:
```
A B C
```