Skip to main content

Documentation Index

Fetch the complete documentation index at: https://docs.metabind.ai/llms.txt

Use this file to discover all available pages before exploring further.

These modifiers control where a component sits and how much space it claims. frame sets fixed or flexible dimensions; containerRelativeFrame sizes a component relative to its nearest scrollable container; padding adds space around it. offset shifts the visual position without affecting layout, zIndex controls stacking order inside a ZStack, and layoutPriority decides which sibling wins when space is tight.

​
frame

Sets the size of a component using fixed dimensions or flexible constraints. 
.frame(props: { width?: number; height?: number; alignment?: Alignment })
.frame(props: { minWidth?: number; idealWidth?: number; maxWidth?: number; minHeight?: number; idealHeight?: number; maxHeight?: number; alignment?: Alignment })
​
props
object
required
Fixed frame.
​
props
object
required
Flexible frame.
The fixed frame overload sets exact dimensions. The flexible frame overload sets constraints — the component sizes itself within those bounds based on its content and the parent’s size proposal. Use Infinity for maxWidth or maxHeight to make the component expand to fill all available space. Fixed size 
Color("blue")
    .frame({ width: 100, height: 100 })
Fixed width only 
Text("Constrained width")
    .frame({ width: 200 })
Full-width with leading alignment 
Text("Left aligned")
    .frame({ maxWidth: Infinity, alignment: "leading" })
Minimum and maximum constraints 
Text("Flexible")
    .frame({ minWidth: 100, maxWidth: 300 })
Full-screen background 
Color("blue")
    .frame({ maxWidth: Infinity, maxHeight: Infinity })
Fixed size with alignment 
Text("Top-left")
    .frame({ width: 200, height: 200, alignment: "topLeading" })

​
containerRelativeFrame

Sizes a component relative to its nearest container. 
.containerRelativeFrame(axes: Axis)
.containerRelativeFrame(props: { axes?: Axis; alignment?: Alignment; count: number; span?: number; spacing: number })
.containerRelativeFrame(props: { axes?: Axis; alignment?: Alignment; fraction: number })
​
axes
Axis
required
Fill container overload: the axis along which the component fills the container. See Axis.
​
props
object
required
Grid subdivision overload.
​
props
object
required
Fractional sizing overload.
The nearest container is the closest ancestor ScrollView, List, or NavigationStack. The modifier sizes the component relative to that container’s visible area, not the full scrollable content. The grid subdivision form calculates the cell width as: (containerWidth - (count - 1) * spacing) / count * span + (span - 1) * spacing. Fill the container horizontally 
Color("blue")
    .containerRelativeFrame("horizontal")
Grid layout — 3 columns with spacing 
Image(url)
    .containerRelativeFrame({
        axes: "horizontal",
        count: 3,
        span: 1,
        spacing: 8
    })
Span multiple columns 
Image(url)
    .containerRelativeFrame({
        axes: "horizontal",
        count: 3,
        span: 2,
        spacing: 8
    })
Fractional sizing — 80% of container width 
Text("Wide content")
    .containerRelativeFrame({
        axes: "horizontal",
        fraction: 0.8
    })
Horizontal scroll with fixed-width cards 
ScrollView({ axes: "horizontal" }, [
    LazyHStack({ spacing: 16 }, [
        ForEach(items, (item) =>
            VStack([
                Image(item.image)
                    .scaledToFill(),
                Text(item.title)
                    .font("headline")
            ])
            .containerRelativeFrame({
                axes: "horizontal",
                count: 3,
                span: 2,
                spacing: 16
            })
        )
    ])
])

​
padding

Adds padding around a component. 
.padding(length: number): Component
.padding(edges?: EdgeSet, length?: number): Component
​
length
number
The padding amount in points. When called with a single number, applies equal padding on all edges.
​
edges
EdgeSet
Which edges to apply padding to. See EdgeSet. When omitted, padding is applied to all edges.
Uniform padding 
Text("Hello")
    .padding(16)
Edge-specific padding 
Text("Horizontal only")
    .padding("horizontal", 20)
Vertical padding 
Text("Vertical spacing")
    .padding("vertical", 12)
Single edge 
Text("Bottom only")
    .padding("bottom", 24)
Combined with background Padding is applied before the background, so the background extends to cover the padded area. 
Text("Padded card")
    .padding(16)
    .background(Color("blue"))
    .cornerRadius(12)

​
offset

Offsets the component’s visual position without affecting layout. 
.offset(offset: { x?: number; y?: number }): Component
​
offset
object
required
The offset values in points.
The offset is purely visual. The component’s original layout space is preserved — surrounding components aren’t affected by the offset. For layout-affecting position changes, use padding instead. Shifting a component 
Circle()
    .frame({ width: 50, height: 50 })
    .foregroundStyle(Color("blue"))
    .offset({ x: 20, y: -10 })
Overlapping badge 
ZStack([
    Image({ systemName: "bell" })
        .font("title"),
    Circle()
        .frame({ width: 12, height: 12 })
        .foregroundStyle(Color("red"))
        .offset({ x: 10, y: -10 })
])
Vertical offset only 
Text("Shifted down")
    .offset({ y: 20 })

​
zIndex

Controls stacking order in a ZStack. 
.zIndex(order: number): Component
​
order
number
required
The stacking priority. Higher values render on top of lower values. The default is 0.
zIndex only affects rendering order within the same parent container. Without it, components in a ZStack render in order: first child at the bottom, last child on top. Negative values are valid and place the component behind siblings with the default zIndex(0). Bring a component to front 
ZStack([
    Circle()
        .frame({ width: 100, height: 100 })
        .foregroundStyle(Color("blue")),
    Circle()
        .frame({ width: 100, height: 100 })
        .foregroundStyle(Color("red"))
        .offset({ x: 30, y: 30 })
        .zIndex(1),
])
Layered cards 
ZStack([
    RoundedRectangle(12)
        .frame({ width: 200, height: 120 })
        .foregroundStyle(Color("gray"))
        .offset({ y: -10 })
        .zIndex(0),
    RoundedRectangle(12)
        .frame({ width: 220, height: 130 })
        .foregroundStyle(Color("blue"))
        .zIndex(1),
    RoundedRectangle(12)
        .frame({ width: 200, height: 120 })
        .foregroundStyle(Color("gray"))
        .offset({ y: 10 })
        .zIndex(0),
])
Dynamic z-ordering 
const body = () => {
    const [selected, setSelected] = useState(0)
    return ZStack(
        items.map((item, index) =>
            Text(item.name)
                .padding(16)
                .background(Color(item.color))
                .cornerRadius(8)
                .offset({ x: index * 20, y: index * 20 })
                .zIndex(index === selected ? 10 : 0)
                .onTapGesture(() => setSelected(index))
        )
    )
}

​
layoutPriority

Sets the layout priority for space distribution among siblings. 
.layoutPriority(priority: number): Component
​
priority
number
required
The layout priority. Higher values receive preference for available space. Default is 0.
Layout priority only matters when sibling components compete for limited space within a parent container (e.g., HStack, VStack). All components default to a priority of 0. A component with priority 1 is offered its ideal size before components with priority 0. Negative values are valid and cause the component to shrink before siblings. Prioritizing one text over another When two texts compete for space in an HStack, the one with higher layout priority gets its full width before the other. 
HStack([
    Text("This text should get more space")
        .layoutPriority(1),
    Text("Secondary text")
])
Preventing truncation 
HStack([
    Text("Important label")
        .layoutPriority(1)
        .lineLimit(1),
    Spacer(),
    Text("$99.99")
        .layoutPriority(1)
        .lineLimit(1)
])

​
See also

  • aspectRatio — sets the width-to-height ratio of content
  • fixedSize — uses ideal size instead of the parent’s proposal
  • Alignment — alignment values for frame and corner-aligned overlays
  • Axis — axis values for containerRelativeFrame
  • EdgeSet — edge values for padding