Layout

Layout components are the foundation for creating structure and arrangement of UI elements. Every layout component can contain children that are rendered according to the layout's rules.

Column

Arranges children vertically from top to bottom.

Column {
    Text("First")
    Text("Second")
    Text("Third")
}

Alignment

// Center children horizontally
Column {
    Text("Centered")
}
.horizontalAlignment("center")

// Distribute children vertically
Column {
    Text("Top")
    Text("Middle")
    Text("Bottom")
}
.verticalAlignment("space-between")

Spacing

Column {
    Text("Item 1")
    Text("Item 2")
    Text("Item 3")
}
.gap(16)

Platform Support: Web, Android, iOS

Row

Arranges children horizontally from left to right.

Row {
    Text("Left")
    Text("Center")
    Text("Right")
}

Alignment

// Center children vertically
Row {
    Text("Vertically centered")
}
.verticalAlignment("center")

// Distribute children horizontally
Row {
    Text("Left")
    Spacer()
    Text("Right")
}
.horizontalAlignment("space-between")

Flexible Children

Use weight to make children fill available space:

Row {
    Text("Fixed")
    Box {
        Text("Flexible")
    }
    .weight(1)
    Text("Fixed")
}

Platform Support: Web, Android, iOS

Box / Container

A generic container that positions children using z-axis stacking. Children are overlaid on top of each other, with later children appearing above earlier ones.

Box {
    Image("background.jpg")
        .fillMaxSize(true)

    Column {
        Text("Overlay content")
    }
    .padding(16)
}

Use Container as an alias for Box:

Container {
    Text("Content")
}

Platform Support: Web, Android, iOS

Center

Centers its children both horizontally and vertically within its bounds.

Center {
    Spinner()
}
.fillMaxSize(true)

Useful for centering loading indicators, modals, or any content that needs to be visually centered.

Platform Support: Web, Android, iOS

Stack

Similar to Box, stacks children on the z-axis for overlapping layouts. Useful for creating layered UI elements like badges on cards.

Stack {
    Card {
        Text("Background card")
    }

    Badge("New")
        .position("absolute")
        .top(8)
        .right(8)
}

Platform Support: Web, Android, iOS

Grid

Arranges children in a grid layout with specified columns.

Grid {
    Card { Text("1") }
    Card { Text("2") }
    Card { Text("3") }
    Card { Text("4") }
    Card { Text("5") }
    Card { Text("6") }
}
.gridColumns(3)
.gap(16)

Grid Configuration

// Fixed number of columns
Grid { }
.gridColumns(2)

// Custom column template (Web)
Grid { }
.gridTemplateColumns("1fr 2fr 1fr")

// Separate row and column gaps
Grid { }
.rowGap(16)
.columnGap(8)

Platform Support: Web, Android, iOS

List

A scrollable container optimized for displaying collections of items. On Android, uses virtualized rendering (LazyColumn) for performance with large lists.

List {
    Text("Item 1")
    Text("Item 2")
    Text("Item 3")
}

List Direction

// Vertical list (default)
List { }

// Horizontal list
List { }
.flexDirection("row")

Scrolling

List { }
.scrollable(true)
.height(400)

Platform Support: Web, Android, iOS

Spacer

Creates flexible empty space between components. Expands to fill available space within a Row or Column.

Row {
    Text("Left aligned")
    Spacer()
    Text("Right aligned")
}

Multiple spacers distribute space evenly:

Row {
    Text("Left")
    Spacer()
    Text("Center")
    Spacer()
    Text("Right")
}

Platform Support: Web, Android, iOS

Divider

A thin horizontal line for visual separation between content sections.

Column {
    Text("Section 1 content")
    Divider()
    Text("Section 2 content")
}

Platform Support: Web, Android, iOS

Layout Applicators

These applicators work with layout components to control sizing, spacing, and alignment.

Size Applicators

Applicator	Description	Example
`width`	Set fixed width	`.width(200)`
`height`	Set fixed height	`.height(100)`
`minWidth`	Minimum width	`.minWidth(100)`
`maxWidth`	Maximum width	`.maxWidth(500)`
`minHeight`	Minimum height	`.minHeight(50)`
`maxHeight`	Maximum height	`.maxHeight(300)`
`size`	Set both width and height	`.size(100)`
`fillMaxWidth`	Fill parent width	`.fillMaxWidth(true)`
`fillMaxHeight`	Fill parent height	`.fillMaxHeight(true)`
`fillMaxSize`	Fill both dimensions	`.fillMaxSize(true)`

Spacing Applicators

Applicator	Description	Example
`padding`	Internal spacing	`.padding(16)`
`margin`	External spacing	`.margin(8)`
`gap`	Space between children	`.gap(12)`
`rowGap`	Vertical gap in grid	`.rowGap(16)`
`columnGap`	Horizontal gap in grid	`.columnGap(8)`

Padding Variants

// Uniform padding
Box { }.padding(16)

// Horizontal and vertical
Box { }.padding(horizontal: 16, vertical: 8)

// Individual sides
Box { }.padding(top: 16, right: 12, bottom: 16, left: 12)

Alignment Applicators

Applicator	Description	Values
`horizontalAlignment`	Horizontal alignment of children	`start`, `center`, `end`, `space-between`, `space-around`
`verticalAlignment`	Vertical alignment of children	`start`, `center`, `end`, `space-between`, `space-around`
`alignItems`	Cross-axis alignment	`flex-start`, `center`, `flex-end`, `stretch`
`justifyContent`	Main-axis alignment	`flex-start`, `center`, `flex-end`, `space-between`, `space-around`

Flex Applicators

Applicator	Description	Example
`weight`	Flex grow factor	`.weight(1)`
`flex`	CSS flex shorthand	`.flex(1)`
`flexGrow`	Grow factor	`.flexGrow(1)`
`flexShrink`	Shrink factor	`.flexShrink(0)`

Layout Examples

Row {
    Text("Logo")
        .fontWeight("bold")

    Spacer()

    Row {
        Link(href: "/home") { Text("Home") }
        Link(href: "/about") { Text("About") }
        Link(href: "/contact") { Text("Contact") }
    }
    .gap(24)
}
.padding(16)
.backgroundColor("#ffffff")

Card Grid

Grid {
    Card {
        Column {
            Image("product1.jpg")
            Text("Product 1")
            Text("$29.99")
        }
    }
    Card {
        Column {
            Image("product2.jpg")
            Text("Product 2")
            Text("$39.99")
        }
    }
}
.gridColumns(3)
.gap(24)
.padding(16)

Centered Loading

Center {
    Column {
        Spinner()
            .size(48)
        Text("Loading...")
            .color("#666666")
    }
    .gap(16)
}
.fillMaxSize(true)

Row {
    // Sidebar
    Column {
        Text("Menu")
            .fontWeight("bold")
        Divider()
        Link(href: "/dashboard") { Text("Dashboard") }
        Link(href: "/settings") { Text("Settings") }
    }
    .width(250)
    .padding(16)
    .backgroundColor("#f5f5f5")

    // Main content
    Column {
        Text("Main Content")
    }
    .weight(1)
    .padding(24)
}
.fillMaxSize(true)

Next Steps

Styling - Complete applicator reference
Inputs - Forms and user interaction
State & Modules - State management

Layout

Layout

Column

Alignment

Spacing

Row

Alignment

Flexible Children

Box / Container

Center

Stack

Grid

Grid Configuration

List

List Direction

Scrolling

Spacer

Divider

Layout Applicators

Size Applicators

Spacing Applicators

Padding Variants

Alignment Applicators

Flex Applicators

Layout Examples

Navigation Bar

Card Grid

Centered Loading

Sidebar Layout

Next Steps

On this page