> ## Documentation Index
> Fetch the complete documentation index at: https://docs.flow-board.co/llms.txt
> Use this file to discover all available pages before exploring further.

# Spacer

> Use Spacer to create intentional empty space and improve screen rhythm.

## What it is

**Spacer** adds empty space between components. It helps you control rhythm without changing the content itself.

## What it's best for

Use it when the screen feels crowded and you need cleaner separation between sections.

## When to use it

* Push the main button lower on the screen
* Separate a headline from supporting copy
* Add breathing room between a visual and a form field
* Create a calmer layout in dense screens

## When not to use it

* Do not use it when simple stack spacing already solves the layout.
* Do not add multiple spacers in a row when one spacing decision would do the job.

## How to add it in the dashboard

1. Open the screen in the dashboard.
2. Add **Spacer** from the **Components panel**.
3. Place it between the components you want to separate.
4. Select the spacer and adjust its size in the **properties panel**.

## Key parameters

| Parameter     | What it changes                                       | When to adjust it                                  |
| ------------- | ----------------------------------------------------- | -------------------------------------------------- |
| Height        | Adds vertical space                                   | Use it between stacked sections                    |
| Width         | Adds horizontal space                                 | Use it inside a horizontal arrangement             |
| Fill behavior | Lets the spacer absorb available room in some layouts | Use it when you want content pushed toward an edge |
| Margin        | Adds extra separation around the spacer               | Use it only when the gap needs more control        |

## Example use cases

* Add more space between a value proposition and the sign-up button
* Push a legal note lower so the headline stays dominant
* Separate plan cards from a sticky action area

## Best practices

* Use spacer to support hierarchy, not to patch inconsistent layouts everywhere.
* Keep spacing values consistent across screens so the product feels intentional.
* Prefer one deliberate gap over many tiny gaps.

## Common mistakes

* Using spacer to fix alignment problems that should be solved in the parent layout
* Stacking several spacers when one larger space would be clearer
* Creating large empty areas that force unnecessary scrolling

## Related components

* [Stack](/components/stack)
* [Text](/components/text)
* [Button](/components/button)
* [Slider](/components/slider)