Skip to main content

Documentation Index

Fetch the complete documentation index at: https://mintlify.com/danielitoCode/compose_svelted/llms.txt

Use this file to discover all available pages before exploring further.

Spacer is an empty div whose size is controlled entirely by a modifier. It has no visual appearance of its own — its sole purpose is to occupy space inside a Column or Row in a way that is explicit, readable, and intention-revealing. In a flex container, a Spacer with Modifier.weight(1) expands to fill all remaining space on the main axis, pushing siblings apart just like Spacer(modifier = Modifier.weight(1f)) does in Jetpack Compose. A Spacer with a fixed Modifier.height(n) or Modifier.width(n) inserts a precise gap, which is useful when Arrangement.spacedBy() would apply the same gap everywhere but you need a one-off larger gap between two specific items.

​
Props

PropTypeDefaultDescription
modifierModifierModifier.empty()Determines the size and display behaviour of the spacer.
The source implementation is intentionally minimal — a single empty div: 
<!-- Spacer.svelte -->
<div style={modifier.toStyle()}></div>

​
Fixed-size spacer

Use Modifier.height(n) inside a Column or Modifier.width(n) inside a Row to add a precise, non-flexible gap between two specific children. 
<script>
  import { Column, Text, Spacer, Modifier, Arrangement } from '@danielito1996/compose-svelted';
</script>

<Column modifier={Modifier.fillMaxWidth().padding(16)}>
  <Text textStyle="titleLarge">Section A</Text>
  <Text>First piece of content.</Text>

  <!-- 32 px gap before the next section, separate from normal spacing -->
  <Spacer modifier={Modifier.height(32)} />

  <Text textStyle="titleLarge">Section B</Text>
  <Text>Second piece of content.</Text>
</Column>

​
Flexible spacer with Modifier.weight()

When you apply Modifier.weight(1) to a Spacer it participates in flex growth, expanding to consume all leftover space on the main axis. This pushes surrounding siblings to opposite ends of the container — a pattern that appears constantly in toolbars, list rows, and navigation bars. Push a label and an action to opposite ends of a Row: 
<script>
  import { Row, Text, Spacer, Modifier, Alignment } from '@danielito1996/compose-svelted';
</script>

<Row
  modifier={Modifier.fillMaxWidth().padding(16)}
  verticalAlignment={Alignment.CenterVertically}
>
  <Text textStyle="titleMedium">Inbox</Text>

  <!-- Grows to fill remaining space -->
  <Spacer modifier={Modifier.weight(1)} />

  <Text>Edit</Text>
</Row>
Push a footer to the bottom of a Column: 
<script>
  import { Column, Text, Spacer, Modifier, Arrangement } from '@danielito1996/compose-svelted';
</script>

<Column modifier={Modifier.fillMaxSize().padding(24)}>
  <Text textStyle="headlineMedium">Welcome</Text>
  <Text>App description goes here.</Text>

  <!-- Fills remaining vertical space, pushing the button to the bottom -->
  <Spacer modifier={Modifier.weight(1)} />

  <Text>Get started →</Text>
</Column>

​
Spacer vs Arrangement.spacedBy()

Both tools add space between children, but they serve different roles:
SpacerArrangement.spacedBy(n)
Applies toA single gap between two specific siblingsEvery gap between all siblings uniformly
Flexible (grows)✅ Yes, with Modifier.weight(1)❌ No — always a fixed pixel value
Readable intentExplicit — you see the Spacer in the treeImplicit — set once on the container
Best forPushing items apart, one-off large gaps, footer anchoringUniform card lists, form fields, icon rows
Combine both approaches freely. Use Arrangement.spacedBy(8) on a Column for consistent item rhythm, then add a <Spacer modifier={Modifier.height(24)} /> wherever you need a section break that is deliberately larger.
A Spacer without any modifier renders as a zero-size element and has no visual effect. Always pair it with at least one sizing modifier — height, width, or weight.

Build docs developers (and LLMs) love

Get started for freeTalk to us