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.
Column, Row, and Box are the three fundamental layout containers in Compose Svelted, mirroring their Jetpack Compose counterparts exactly. Column stacks children along the vertical axis, Row arranges them horizontally, and Box overlays them in a single grid cell — letting you build virtually any screen structure through composition alone. All three accept a modifier prop for sizing, padding, scrolling, and more.
Column is a vertical flex container. It maps horizontalAlignment to CSS align-items (the cross axis) and verticalArrangement to CSS justify-content (the main axis). When you use Arrangement.spacedBy(n), a CSS gap is applied automatically.| Prop | Type | Default | Description |
|---|
modifier | Modifier | Modifier.empty() | Size, padding, scroll, and other CSS modifiers. |
horizontalAlignment | HorizontalAlignment | Alignment.Start | Cross-axis alignment applied to all children via align-items. |
verticalArrangement | ArrangementValue | Arrangement.Top | Main-axis distribution of children via justify-content. When type is 'spaced', adds a pixel gap. |
HorizontalAlignment values| Token | CSS value |
|---|
Alignment.Start | flex-start |
Alignment.CenterHorizontally | center |
Alignment.End | flex-end |
ArrangementValue values for Column| Token | Behaviour |
|---|
Arrangement.Top | Pack children toward the top |
Arrangement.Bottom | Pack children toward the bottom |
Arrangement.Center | Center children vertically |
Arrangement.SpaceBetween | Equal space between children |
Arrangement.SpaceAround | Equal space around children |
Arrangement.SpaceEvenly | Equal space between and around |
Arrangement.spacedBy(n) | Fixed n px gap between each child |
Arrangement.spacedBy(n, Arrangement.Center) | Fixed gap, centered along the axis |
<script>
import { Column, Text, Modifier, Alignment, Arrangement } from '@danielito1996/compose-svelted';
</script>
<Column
modifier={Modifier.padding(16).fillMaxWidth()}
horizontalAlignment={Alignment.CenterHorizontally}
verticalArrangement={Arrangement.spacedBy(12)}
>
<Text textStyle="titleLarge">Title</Text>
<Text>Body text</Text>
</Column>
Scrolling is not enabled by default. Wrap the content in Modifier.verticalScroll(true) for an inline-scrollable Column, or use LazyColumn for long lists that benefit from virtualization.<Column modifier={Modifier.fillMaxSize().verticalScroll(true)}>
<!-- hundreds of items are fine here -->
</Column>
Row is a horizontal flex container. It maps verticalAlignment to CSS align-items (the cross axis) and horizontalArrangement to CSS justify-content (the main axis). Like Column, Arrangement.spacedBy(n) injects a pixel gap automatically.| Prop | Type | Default | Description |
|---|
modifier | Modifier | Modifier.empty() | Size, padding, scroll, and other CSS modifiers. |
verticalAlignment | VerticalAlignment | Alignment.Top | Cross-axis alignment applied to all children via align-items. |
horizontalArrangement | ArrangementValue | Arrangement.Start | Main-axis distribution of children via justify-content. |
VerticalAlignment values| Token | CSS value |
|---|
Alignment.Top | flex-start |
Alignment.CenterVertically | center |
Alignment.Bottom | flex-end |
<script>
import { Row, Icon, Text, Modifier, Alignment, Arrangement, painterResource, Res } from '@danielito1996/compose-svelted';
</script>
<Row
verticalAlignment={Alignment.CenterVertically}
horizontalArrangement={Arrangement.spacedBy(8)}
>
<Icon painter={painterResource(Res.raw("info.svg"))} modifier={Modifier.size(20)} />
<Text>Label</Text>
</Row>
Modifier.weight()Use Modifier.weight(n) on individual children to distribute remaining space proportionally, exactly like Modifier.weight in Jetpack Compose. Children with a weight participate in flex growth; unweighted children take only their intrinsic size.<script>
import { Row, Surface, Text, Modifier } from '@danielito1996/compose-svelted';
</script>
<Row modifier={Modifier.fillMaxWidth()}>
<!-- Takes 2/3 of available space -->
<Surface modifier={Modifier.weight(2).padding(8)}>
<Text>Main content</Text>
</Surface>
<!-- Takes 1/3 of available space -->
<Surface modifier={Modifier.weight(1).padding(8)}>
<Text>Sidebar</Text>
</Surface>
</Row>
Horizontal overflow is not scrollable by default. Use Modifier.horizontalScroll() on the Row, or switch to LazyRow for virtualized horizontal lists.
Box is a stacking overlay container implemented with CSS Grid. Every direct child is placed in the same grid area (grid-template-areas: 'stack'), so they all overlap. The contentAlignment prop controls the default placement of all children via place-items. Individual children can override their own position with Modifier.align().| Prop | Type | Default | Description |
|---|
modifier | Modifier | Modifier.empty() | Size, padding, and other CSS modifiers. |
contentAlignment | BoxAlignment | Alignment.TopStart | Default alignment for all children, resolved to CSS place-items. |
BoxAlignment tokens| Token | Position |
|---|
Alignment.TopStart | Top-left |
Alignment.TopCenter | Top-center |
Alignment.TopEnd | Top-right |
Alignment.CenterStart | Middle-left |
Alignment.Center | Dead center |
Alignment.CenterEnd | Middle-right |
Alignment.BottomStart | Bottom-left |
Alignment.BottomCenter | Bottom-center |
Alignment.BottomEnd | Bottom-right |
<script>
import { Box, Image, Surface, Text, Modifier, Alignment, ContentScale } from '@danielito1996/compose-svelted';
</script>
<Box
contentAlignment={Alignment.Center}
modifier={Modifier.fillMaxSize()}
>
<Image
painter="bg.jpg"
contentScale={ContentScale.Crop}
modifier={Modifier.fillMaxSize()}
/>
<Surface modifier={Modifier.padding(24)}>
<Text textStyle="headlineMedium">Overlay</Text>
</Surface>
</Box>
Modifier.align()Any child can break out of the contentAlignment default by applying Modifier.align(Alignment.XXX). This resolves to a CSS place-self override on that element only.<script>
import { Box, Text, Modifier, Alignment } from '@danielito1996/compose-svelted';
</script>
<Box
modifier={Modifier.size(210)}
contentAlignment={Alignment.Center}
>
<!-- Sits at the center (inherits contentAlignment) -->
<Text>Center</Text>
<!-- Overrides to bottom-right corner -->
<Text modifier={Modifier.align(Alignment.BottomEnd)}>
Bottom End
</Text>
<!-- Overrides to top-left corner -->
<Text modifier={Modifier.align(Alignment.TopStart)}>
Top Start
</Text>
</Box>
Box is especially useful for badges, floating labels, and hero images where children must overlap. For non-overlapping layouts, prefer Column or Row to keep the visual hierarchy explicit.