Skip to main content
.frame(props: { width?: number; height?: number; alignment?: Alignment })
.frame(props: { minWidth?: number; idealWidth?: number; maxWidth?: number; minHeight?: number; idealHeight?: number; maxHeight?: number; alignment?: Alignment })

​
Overload 1: Fixed frame

​
props
object
required

​
Overload 2: Flexible frame

​
props
object
required

​
Support

​
Usage

​
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" })

​
Notes

The fixed frame overload sets exact dimensions. The flexible frame overload sets constraints — the component will size 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.

​
See Also