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.

Scaffold is a full-screen layout shell that mirrors Jetpack Compose’s Scaffold component. It stretches to fill its parent (width: 100%; height: 100%) and uses a vertical flex column to divide the screen into up to four named zones: a top bar, the main scrollable content area, a bottom bar, and a floating action button overlay. Any combination of zones can be used — empty slots simply take no space. The FAB is rendered in an absolutely-positioned transparent overlay that covers the entire scaffold, so it never displaces content. Its exact corner is controlled by the fabAlignment prop.

​
Props

PropTypeDefaultDescription
modifierModifierModifier.empty()Applied to the outermost scaffold container for additional sizing or styling.
contentPaddingnumber16Pixel padding applied to the main content area (default slot). Set to 0 if the content manages its own padding.
fabAlignmentBoxAlignmentAlignment.BottomEndPosition of the floating action button within the scaffold. Accepts any Alignment.* box token.

​
Named slots

SlotPurpose
topBarRenders at the very top of the screen — typically a Row-based app bar. Shrinks to its natural height.
(default)The main content area. Receives contentPadding and fills all remaining vertical space between the top and bottom bars. Overflow is hidden — add Modifier.verticalScroll(true) or use LazyColumn inside.
bottomBarRenders at the very bottom — typically a navigation bar. Shrinks to its natural height.
floatingActionButtonRendered in the FAB overlay, positioned according to fabAlignment with a 16 px margin from the nearest edges.

​
Example

The following example assembles a complete screen with all four slots populated: 
<script>
  import {
    Scaffold,
    Column,
    Row,
    Text,
    Surface,
    Modifier,
    Alignment,
    Arrangement,
  } from '@danielito1996/compose-svelted';
</script>

<Scaffold
  modifier={Modifier.fillMaxSize()}
  contentPadding={16}
  fabAlignment={Alignment.BottomEnd}
>
  <!-- Top bar -->
  <svelte:fragment slot="topBar">
    <Surface modifier={Modifier.fillMaxWidth().padding(16)}>
      <Row
        modifier={Modifier.fillMaxWidth()}
        verticalAlignment={Alignment.CenterVertically}
        horizontalArrangement={Arrangement.SpaceBetween}
      >
        <Text textStyle="titleLarge">My App</Text>
        <Text>⚙️</Text>
      </Row>
    </Surface>
  </svelte:fragment>

  <!-- Main content (default slot) -->
  <Column
    modifier={Modifier.fillMaxSize().verticalScroll(true)}
    verticalArrangement={Arrangement.spacedBy(16)}
  >
    <Text textStyle="headlineMedium">Hello, World!</Text>
    <Text>
      This is the main content area. It fills all space between the
      top bar and the bottom navigation bar.
    </Text>
  </Column>

  <!-- Bottom bar -->
  <svelte:fragment slot="bottomBar">
    <Surface modifier={Modifier.fillMaxWidth()}>
      <Row
        modifier={Modifier.fillMaxWidth().padding(12)}
        horizontalArrangement={Arrangement.SpaceEvenly}
        verticalAlignment={Alignment.CenterVertically}
      >
        <Text>🏠 Home</Text>
        <Text>🔍 Search</Text>
        <Text>👤 Profile</Text>
      </Row>
    </Surface>
  </svelte:fragment>

  <!-- Floating action button -->
  <svelte:fragment slot="floatingActionButton">
    <Surface modifier={Modifier.padding(16)}>
      <Text>＋</Text>
    </Surface>
  </svelte:fragment>
</Scaffold>

​
FAB alignment options

The fabAlignment prop accepts any BoxAlignment token from the Alignment namespace. The most common choices are:
TokenPosition
Alignment.BottomEndBottom-right (default)
Alignment.BottomStartBottom-left
Alignment.BottomCenterBottom-center
Alignment.TopEndTop-right
Alignment.TopStartTop-left
Alignment.CenterScreen center
<!-- Move the FAB to the bottom-left -->
<Scaffold fabAlignment={Alignment.BottomStart}>
  ...
</Scaffold>

​
Content padding

The contentPadding prop wraps the default slot only. Set it to 0 when your content component already handles its own insets, or when you need edge-to-edge rendering inside the content area. 
<!-- Edge-to-edge content, no extra padding around the default slot -->
<Scaffold contentPadding={0}>
  <Column modifier={Modifier.fillMaxSize().padding(24)}>
    <Text>I control my own padding.</Text>
  </Column>
</Scaffold>
Scaffold requires its parent to have a defined height. If you place it at the root of a screen, ensure the root element is height: 100vh (or equivalent). Without a bounded height, height: 100% collapses and the bottom bar and FAB will not be positioned correctly.
The FAB overlay uses pointer-events: none on the transparent backing layer and pointer-events: auto only on the FAB wrapper itself, so it never blocks click/tap events on the content below it.

Build docs developers (and LLMs) love

Get started for freeTalk to us