ProductFeaturesDocs
Built InUI ComponentsAdmin ConsoleDatabaseBackendStorageAIRAGAuthSecurity
CompanyStoryAboutPricingBlogRoadmap
Install FLIN

Spacer

Adds vertical space between elements. Fixed size or flexible grow.

Fixed Size

Simple 2rem vertical gap between two content blocks.

Above
Below (2rem gap)

Size Comparison

Compare different spacing values from small to large.

0.5rem below
1rem below
3rem below
End

Flex Grow

Without a size prop, Spacer grows to fill remaining flex space. Pushes footer to bottom.

Header (top)
Footer (pushed to bottom)

Page Layout

Use Spacer to add breathing room between page sections.

Welcome Your dashboard overview.
Projects12

Usage

<div>Above</div><Spacer size="2rem" /><div>Below (2rem gap)</div><Spacer size="0.5rem" /><Spacer size="1rem" /><Spacer size="3rem" /><!-- Flex grow (no size) pushes content apart --><div style="display: flex; flex-direction: column; height: 200px"> <div>Header</div> <Spacer /> <div>Footer (pushed to bottom)</div></div>

Props

PropTypeDefaultDescription
sizestring""Fixed height. If empty, uses flex: 1 to fill available space