Skip to main content
VStack(children: Component): Component;
VStack(children: Component[]): Component;
VStack(props: { spacing?: number; alignment?: HorizontalAlignment }, children: Component[]): Component;
children
Component | Component[]
required
A single component or array of components to arrange vertically.
props
object
Configuration options for the stack layout.

Support

Usage

Basic stack

VStack([
    Text("First"),
    Text("Second"),
    Text("Third")
])

With spacing and alignment

VStack({ spacing: 16, alignment: "leading" }, [
    Text("Title").font("headline"),
    Text("Subtitle").foregroundStyle(Color("secondary"))
])

Nested layout

VStack({ spacing: 24 }, [
    HStack({ spacing: 12 }, [
        Image({ systemName: "person.fill" }),
        Text("Profile")
    ]),
    Divider(),
    Text("Welcome back!")
        .font("body")
])

With spacers

VStack([
    Text("Top"),
    Spacer(),
    Text("Bottom")
])
    .frame({ maxHeight: ".infinity" })

See Also