Layout Reference

Complete reference for layout components in Hypen.

Column

Arranges children vertically.

Column {
    Text("Top")
    Text("Middle")
    Text("Bottom")
}
.gap(12)

Row

Arranges children horizontally.

Row {
    Text("Left")
    Text("Right")
}
.gap(12)

Box / Container

Generic container with z-axis stacking.

Box {
    Image("background.jpg")
    Text("Overlay")
}

Center

Centers children both horizontally and vertically.

Center {
    Spinner()
}
.fillMaxSize(true)

Stack

Z-axis stacking for overlapping elements.

Stack {
    Card { Text("Base") }
    Badge("New")
}

Grid

Data-driven grid: pass an array binding and an item template — one child is rendered per record, laid out in configurable columns. (A static Grid { ... } with hand-written children is an error; use nested Rows/Columns for fixed layouts.)

Grid(@state.products, key: "id") {
    Card { Text("@{item.name}") }
}
.gridColumns(2)
.gap(16)

List

Scrollable, data-driven list — shorthand for ForEach(items: @state.items, key: "id") in a scrollable container. The array binding is required.

List(@state.items) {
    Text("@{item.title}")
}
.height(400)

Spacer

Flexible empty space.

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

Divider

Visual separator line.

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

Alignment Applicators

Size Applicators