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.
In Compose Svelted, layout intent is expressed through two distinct namespaces: Alignment controls where children sit on the cross axis (or, in the case of Box, on both axes simultaneously), while Arrangement controls how children are distributed along the main axis. Both systems use branded TypeScript types that make incorrect combinations a compile-time error — you cannot pass a VerticalAlignment where a HorizontalAlignment is expected, even though both might resolve to the same CSS value internally.
The branded type system
Three opaque types represent the different alignment contexts:
// Cross-axis alignment for Column children (horizontal)
type HorizontalAlignment = {
readonly _brand: 'HorizontalAlignment';
readonly cssValue: string;
};
// Cross-axis alignment for Row children (vertical)
type VerticalAlignment = {
readonly _brand: 'VerticalAlignment';
readonly cssValue: string;
};
// Composed alignment for Box children (horizontal + vertical together)
type BoxAlignment = {
readonly _brand: 'BoxAlignment';
readonly horizontal: string;
readonly vertical: string;
};
_brand discriminant is readonly and is set only by the internal factory functions, you cannot construct these types yourself or cast between them. TypeScript will reject code such as:
// ❌ Type error — VerticalAlignment is not assignable to HorizontalAlignment
<Column horizontalAlignment={Alignment.Top} />
// ✅ Correct
<Column horizontalAlignment={Alignment.Start} />
Alignment tokens
All tokens live on the single Alignment export. The sub-sections below group them by the container that consumes them.
HorizontalAlignment — for Column
A Column stacks children vertically. The horizontalAlignment prop controls where children sit on the horizontal (cross) axis.
| Token | CSS equivalent | Description |
|---|
Alignment.Start | align-items: flex-start | Children hug the left edge |
Alignment.CenterHorizontally | align-items: center | Children are centred horizontally |
Alignment.End | align-items: flex-end | Children hug the right edge |
<script lang="ts">
import { Column, Text, Alignment } from "@danielito1996/compose-svelted";
</script>
<Column horizontalAlignment={Alignment.CenterHorizontally}>
<Text>Centred child</Text>
<Text>Also centred</Text>
</Column>
VerticalAlignment — for Row
A Row places children side by side. The verticalAlignment prop controls where children sit on the vertical (cross) axis.
| Token | CSS equivalent | Description |
|---|
Alignment.Top | align-items: flex-start | Children align to the top edge |
Alignment.CenterVertically | align-items: center | Children are centred vertically |
Alignment.Bottom | align-items: flex-end | Children align to the bottom edge |
<script lang="ts">
import { Row, Text, Alignment } from "@danielito1996/compose-svelted";
</script>
<Row verticalAlignment={Alignment.CenterVertically}>
<Text>Icon</Text>
<Text>Label aligned with the icon</Text>
</Row>
BoxAlignment — for Box
A Box stacks children on top of each other (like CSS position: relative with absolute-positioned children). The contentAlignment prop specifies the default position for all children on both axes simultaneously.
| Token | Horizontal | Vertical |
|---|
Alignment.TopStart | flex-start | flex-start |
Alignment.TopCenter | center | flex-start |
Alignment.TopEnd | flex-end | flex-start |
Alignment.CenterStart | flex-start | center |
Alignment.Center | center | center |
Alignment.CenterEnd | flex-end | center |
Alignment.BottomStart | flex-start | flex-end |
Alignment.BottomCenter | center | flex-end |
Alignment.BottomEnd | flex-end | flex-end |
<script lang="ts">
import { Box, Text, Modifier, Alignment } from "@danielito1996/compose-svelted";
</script>
<!-- Default: every child is centred -->
<Box
contentAlignment={Alignment.Center}
modifier={Modifier.size(200)}
>
<Text>Always centred</Text>
</Box>
<!-- Override one child to the bottom-right -->
<Box
contentAlignment={Alignment.Center}
modifier={Modifier.size(200)}
>
<Text>Main content</Text>
<Text modifier={Modifier.align(Alignment.BottomEnd)}>Badge</Text>
</Box>
Arrangement tokens
Arrangement controls how children are distributed along the main axis of a Column or Row. All values are typed as ArrangementValue:
type ArrangementValue =
| { readonly type: 'static'; readonly justifyContent: JustifyContent }
| { readonly type: 'spaced'; readonly justifyContent: JustifyContent; readonly gap: number };
Static arrangements
Static tokens map directly to CSS justify-content values and carry no gap.
| Token | justify-content | Container |
|---|
Arrangement.Top | flex-start | Column (main axis starts at top) |
Arrangement.Bottom | flex-end | Column (main axis ends at bottom) |
Arrangement.Start | flex-start | Row (main axis starts at left) |
Arrangement.End | flex-end | Row (main axis ends at right) |
Arrangement.Center | center | Column or Row |
Arrangement.SpaceBetween | space-between | Column or Row |
Arrangement.SpaceAround | space-around | Column or Row |
Arrangement.SpaceEvenly | space-evenly | Column or Row |
<script lang="ts">
import { Row, Text, Arrangement } from "@danielito1996/compose-svelted";
</script>
<Row horizontalArrangement={Arrangement.SpaceBetween}>
<Text>Left</Text>
<Text>Right</Text>
</Row>
Dynamic arrangement: spacedBy
Arrangement.spacedBy adds a uniform pixel gap between every child. An optional second argument shifts the justify-content base so you can combine a gap with centering or end-alignment.
spacedBy(gap: number, baseAlign?: ArrangementValue): ArrangementValue
| Argument | Type | Default | Description |
|---|
gap | number | — | Gap in pixels between each child |
baseAlign | ArrangementValue | Arrangement.Start | Base justify-content applied alongside the gap |
<script lang="ts">
import { Column, Row, Text, Arrangement } from "@danielito1996/compose-svelted";
</script>
<!-- 16 px gap, children packed from the start -->
<Column verticalArrangement={Arrangement.spacedBy(16)}>
<Text>First</Text>
<Text>Second</Text>
<Text>Third</Text>
</Column>
<!-- 12 px gap with children centred on the main axis -->
<Row horizontalArrangement={Arrangement.spacedBy(12, Arrangement.Center)}>
<Text>Alpha</Text>
<Text>Beta</Text>
<Text>Gamma</Text>
</Row>
Overriding child alignment with Modifier.align()
The container-level horizontalAlignment / verticalAlignment / contentAlignment prop sets a default for all children. Individual children can escape that default by using Modifier.align(). The token type must match the parent container:
- Pass a
HorizontalAlignment inside a Column
- Pass a
VerticalAlignment inside a Row
- Pass a
BoxAlignment inside a Box
<script lang="ts">
import { Column, Text, Modifier, Alignment } from "@danielito1996/compose-svelted";
</script>
<!-- Most children follow Start, but the second one breaks the rule -->
<Column horizontalAlignment={Alignment.Start}>
<Text>Aligned to start</Text>
<Text modifier={Modifier.align(Alignment.CenterHorizontally)}>
I am centred
</Text>
<Text modifier={Modifier.align(Alignment.End)}>
I am aligned to the end
</Text>
</Column>