Articles on: Rooms

Spacer widget

The Spacer widget adds visual breathing room between widgets. Small feature, big impact on how rooms read.



How to add


  1. On the floating build bar at the bottom of the editor, locate the widget — in the primary widgets row, or under the ⌄ All widgets popover if it's not there.
  2. Drag the Spacer widget onto the target section.
  3. Drag its handle to set any height you want.


The selection pill — Spacer controls


The Spacer is the simplest widget — purely whitespace, nothing to configure beyond its height. Its selection pill reflects that:


  1. Design (paintbrush icon) — opens the contextual Design panel.
  2. ⋮ MoreDuplicate · Delete.


(No Size, no Dark mode, no Edit resource — there's nothing to edit.)


Works best with Compaction enabled


The Spacer mainly makes sense in sections with Compaction enabled. Here's why:


  • Compaction enabled — widgets snap together with no gaps. A Spacer is the only way to introduce deliberate vertical breathing room between them.
  • Compaction disabled — widgets are already placed freely anywhere in the section, so you can just move them apart. A Spacer adds no value.


See Styling sections and widgets for how Compaction works.


When to use


  • Between related widgets within a compacted section, to create a subtle pause
  • Before and after a CTA to make it stand out visually
  • Between text and media in tight layouts to avoid visual crowding


When NOT to use


  • Between every widget — creates scroll fatigue; trust the section's built-in spacing
  • To replace a section break — if content is truly separate, make it a new section
  • In a section with Compaction disabled — just space your widgets directly


Minimal is best


Most rooms need one or two spacers. Don't overuse. Good visual design is about what you remove, not what you add.


Updated on: 18/06/2026

Was this article helpful?

Share your feedback

Cancel

Thank you!