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
- Open the screen in the dashboard.
- Add Spacer from the Components panel.
- Place it between the components you want to separate.
- 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