---
title: Spacer
description: Spacer is used to add consistent vertical spacing between elements in a layout.
category: Layout
related: [Container, Separator, Panel]
commonPatterns: [vertical-spacing, content-separation]
---

Source: https://clickhouse.design/click-ui/spacer

# Spacer

Spacer is a utility component that adds consistent vertical spacing between elements. It helps maintain visual rhythm and proper spacing throughout your interface.

## Example

## Props

| Prop | Type                                            | Default value | Description                                               |
| ---- | ----------------------------------------------- | ------------- | --------------------------------------------------------- |
| size | `"xs" \| "sm" \| "md" \| "lg" \| "xl" \| "xxl"` | `"md"`        | Size of the vertical spacing using predefined size tokens |

```tsx
import { Spacer } from '@clickhouse/click-ui'

<Spacer size="md" />
```

## Quick start

Use Spacer for consistent vertical spacing:

```tsx
<Text>First item</Text>
<Spacer size='md' />
<Text>Second item</Text>
<Spacer size='lg' />
<Text>Third item</Text>
```

## Related components

- **Container**: Use Container's gap prop for spacing between multiple items
- **Separator**: Use Separator for visual dividers between sections
- **Panel**: Use Spacer inside Panel for content spacing

## Common use cases

### Content spacing

```tsx
import { Spacer, Text, Container } from '@clickhouse/click-ui'

function ContentSpacing() {
return (
  <Container orientation='vertical'>
    <Text size='lg'>Title</Text>
    <Spacer size='sm' />
    <Text>Subtitle</Text>
    <Spacer size='md' />
    <Text>Content</Text>
  </Container>
)
}
```

## Variants

### Sizes

Content

Extra small (xs)

Small (sm)

Medium (md)

Large (lg)

Extra large (xl)

Extra extra large (xxl)