<Spacer>

A simple utility for adding a fixed amount of empty space between elements. Every argument you pass is applied directly to the element's inline style — so anything that's a valid CSS property name maps through.

Basic Usage

<Spacer @height="20px" />
<Spacer @width="100%" @height="1px" />     {{!-- horizontal divider line --}}
<Spacer @marginTop="2rem" />

How It Works

Internally, the component iterates over every @-arg and assigns it to the element's style after camelizing the key. So:

Only string and numeric values are applied; booleans and functions are ignored.

Real-World Examples

{{!-- Standard vertical spacing between form sections --}}
<ContentPanel @title="Step 1" @open={{true}}>{{!-- ... --}}</ContentPanel>
<Spacer @height="1rem" />
<ContentPanel @title="Step 2" @open={{true}}>{{!-- ... --}}</ContentPanel>

{{!-- Horizontal rule via spacer --}}
<Spacer @height="1px" @width="100%" @backgroundColor="rgba(0,0,0,0.1)" />

{{!-- Bottom-of-page padding --}}
<Spacer @height="400px" />

When to Use

Reach for <Spacer> when you need a one-off amount of space and don't want to add a CSS class. For repeated spacing patterns, use Tailwind utility classes (mt-4, space-y-2, etc.).

Source