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.

Shapes are vector primitives that fill their frame. Rectangle and RoundedRectangle are sharp- and rounded-corner rectangles; Capsule is a rounded rectangle with maximum corner radius. Circle and Ellipse are radial primitives. Path builds an arbitrary vector shape from drawing commands. Every shape supports .fill(style) to paint its interior and .stroke(style) to draw its outline. Shapes also work as .clipShape(), .background(), or .overlay() arguments for other components.

​
Rectangle

A rectangle shape that fills its frame. 
Rectangle(): Shape;
Rectangle takes no parameters. It creates a rectangle that fills its entire frame.
​
.fill(style)
(style: Style) => Shape
Fills the rectangle interior with a color, gradient, or other style.
​
.stroke(style)
(style: Style | StrokeOptions) => Shape
Draws the rectangle outline. Pass a Style for a 1-point stroke, or a StrokeOptions object ({ style: Style, lineWidth?: number }) for custom width.
Basic rectangle 
Rectangle()
    .fill(Color("blue"))
    .frame({ width: 200, height: 100 })
Stroked rectangle 
Rectangle()
    .stroke(Color("gray"), 1)
    .frame({ height: 1 })
As a background 
Text("Hello")
    .padding(16)
    .background(
        Rectangle().fill(Color("yellow").opacity(0.3))
    )
Color swatch 
HStack({ spacing: 4 }, [
    ForEach(["red", "orange", "yellow", "green", "blue"], (color) =>
        Rectangle()
            .fill(Color(color))
            .frame({ width: 32, height: 32 })
    )
])
For rounded corners, use RoundedRectangle or the .cornerRadius() modifier.

​
RoundedRectangle

A rectangle with rounded corners. 
RoundedRectangle(props?: { cornerRadius?: number }): Shape;
​
props
object
Configuration options for the rounded rectangle.
​
.fill(style)
(style: Style) => Shape
Fills the rounded rectangle interior with a color, gradient, or other style.
​
.stroke(style)
(style: Style | StrokeOptions) => Shape
Draws the rounded rectangle outline. Pass a Style for a 1-point stroke, or a StrokeOptions object ({ style: Style, lineWidth?: number }) for custom width.
Basic rounded rectangle 
RoundedRectangle({ cornerRadius: 12 })
    .fill(Color("blue"))
    .frame({ width: 200, height: 100 })
Stroked rounded rectangle 
RoundedRectangle({ cornerRadius: 8 })
    .stroke(Color("gray"), 2)
    .frame({ width: 160, height: 80 })
Card background 
VStack({ spacing: 12 }, [
    Text("Card Title").font("headline"),
    Text("Card description goes here.")
])
    .padding(16)
    .background(
        RoundedRectangle({ cornerRadius: 16 })
            .fill(Color("secondarySystemBackground"))
    )
With gradient fill 
RoundedRectangle({ cornerRadius: 20 })
    .fill(LinearGradient({
        colors: [Color("purple"), Color("blue")]
    }))
    .frame({ width: 240, height: 120 })
As a clip shape 
Image({ url: "photo.jpg" })
    .frame({ width: 200, height: 150 })
    .clipShape(RoundedRectangle({ cornerRadius: 12 }))
For fully rounded ends (pill shape), use Capsule instead of computing the corner radius manually. RoundedRectangle can also be used with .clipShape() and .contentShape() modifiers.

​
Circle

A circle shape centered in its frame. 
Circle(): Shape;
Circle takes no parameters. It creates a circle that fills the smaller dimension of its frame.
​
.fill(style)
(style: Style) => Shape
Fills the circle interior with a color, gradient, or other style.
​
.stroke(style)
(style: Style | StrokeOptions) => Shape
Draws the circle outline. Pass a Style for a 1-point stroke, or a StrokeOptions object ({ style: Style, lineWidth?: number }) for custom width.
Basic circle 
Circle()
    .fill(Color("blue"))
    .frame({ width: 50, height: 50 })
Stroked circle 
Circle()
    .stroke(Color("red"), 2)
With gradient fill 
Circle()
    .fill(LinearGradient({
        colors: [Color("purple"), Color("blue")]
    }))
    .frame({ width: 100, height: 100 })
Avatar placeholder 
ZStack([
    Circle()
        .fill(Color("gray").opacity(0.3))
        .frame({ width: 64, height: 64 }),
    Text("JD")
        .font("headline")
        .foregroundStyle(Color("white"))
])
As a clip shape 
Image({ url: "avatar.jpg" })
    .frame({ width: 48, height: 48 })
    .clipShape(Circle())

​
Ellipse

An ellipse shape that fills its frame. 
Ellipse(): Shape;
Ellipse takes no parameters. It creates an ellipse that fills the entire frame, stretching to fit both dimensions.
​
.fill(style)
(style: Style) => Shape
Fills the ellipse interior with a color, gradient, or other style.
​
.stroke(style)
(style: Style | StrokeOptions) => Shape
Draws the ellipse outline. Pass a Style for a 1-point stroke, or a StrokeOptions object ({ style: Style, lineWidth?: number }) for custom width.
Basic ellipse 
Ellipse()
    .fill(Color("orange"))
    .frame({ width: 200, height: 100 })
Stroked ellipse 
Ellipse()
    .stroke(Color("blue"), 3)
    .frame({ width: 150, height: 80 })
With gradient fill 
Ellipse()
    .fill(LinearGradient({
        colors: [Color("green"), Color("teal")]
    }))
    .frame({ width: 200, height: 120 })
When the frame is square, Ellipse renders identically to Circle.

​
Capsule

A capsule shape — a rounded rectangle with maximum corner radius. 
Capsule(): Shape;
Capsule takes no parameters. It creates a rectangle with fully rounded ends (corner radius equals half the shorter dimension).
​
.fill(style)
(style: Style) => Shape
Fills the capsule interior with a color, gradient, or other style.
​
.stroke(style)
(style: Style | StrokeOptions) => Shape
Draws the capsule outline. Pass a Style for a 1-point stroke, or a StrokeOptions object ({ style: Style, lineWidth?: number }) for custom width.
Basic capsule 
Capsule()
    .fill(Color("blue"))
    .frame({ width: 200, height: 44 })
Stroked capsule 
Capsule()
    .stroke(Color("gray"), 2)
    .frame({ width: 180, height: 40 })
Pill-shaped button background 
Text("Get Started")
    .foregroundStyle(Color("white"))
    .padding({ horizontal: 24, vertical: 12 })
    .background(
        Capsule().fill(Color("blue"))
    )
Tag or badge 
HStack({ spacing: 4 }, [
    Text("NEW")
        .font("caption2")
        .bold()
        .foregroundStyle(Color("white"))
        .padding({ horizontal: 8, vertical: 4 })
        .background(Capsule().fill(Color("red")))
])
When the frame is square, Capsule renders as a circle. Use Circle directly if a circle is always intended. For a rounded rectangle with a specific corner radius, use RoundedRectangle instead.

​
Path

Creates a custom vector shape from path drawing commands. 
Path(builder: (path: PathBuilder) => void): Shape;
​
builder
(path: PathBuilder) => void
required
A function that receives a PathBuilder and uses its drawing commands to construct the shape.
The path parameter provides the following drawing commands:
​
path.move(x, y)
(x: number, y: number) => void
Begins a new subpath at the given point.
​
path.line(x, y)
(x: number, y: number) => void
Adds a straight line from the current point to the given point.
​
path.quadCurve(x, y, controlX, controlY)
(x: number, y: number, controlX: number, controlY: number) => void
Adds a quadratic Bezier curve to the given point with one control point.
​
path.curve(x, y, control1X, control1Y, control2X, control2Y)
(x: number, y: number, control1X: number, control1Y: number, control2X: number, control2Y: number) => void
Adds a cubic Bezier curve to the given point with two control points.
​
path.arc(props)
(props: { centerX: number; centerY: number; radius: number; startAngle: number; endAngle: number; clockwise?: boolean }) => void
Adds an arc. Angles are specified in degrees.
​
path.addRect(x, y, width, height)
(x: number, y: number, width: number, height: number) => void
Adds a rectangle subpath.
​
path.addRoundedRect(props)
(props: { x: number; y: number; width: number; height: number; cornerWidth: number; cornerHeight: number }) => void
Adds a rounded rectangle subpath.
​
path.addEllipse(x, y, width, height)
(x: number, y: number, width: number, height: number) => void
Adds an ellipse subpath inscribed in the given rectangle.
​
path.addLines(points)
(points: [number, number][]) => void
Adds a polyline from an array of [x, y] coordinate pairs.
​
path.close()
() => void
Closes the current subpath by drawing a line back to the starting point.
Since Path returns a Shape, it supports the standard shape methods:
​
.fill(style)
(style: Style) => Shape
Fills the path interior with a color, gradient, or other style.
​
.stroke(style)
(style: Style | StrokeOptions) => Shape
Draws the path outline. Pass a Style for a 1-point stroke, or a StrokeOptions object ({ style: Style, lineWidth?: number }) for custom width.
Triangle 
Path((path) => {
    path.move(50, 0)
    path.line(100, 100)
    path.line(0, 100)
    path.close()
})
    .fill(Color("blue"))
    .frame({ width: 100, height: 100 })
Star shape 
Path((path) => {
    path.move(50, 0)
    path.line(61, 36)
    path.line(100, 36)
    path.line(68, 58)
    path.line(79, 95)
    path.line(50, 72)
    path.line(21, 95)
    path.line(32, 58)
    path.line(0, 36)
    path.line(39, 36)
    path.close()
})
    .fill(Color("yellow"))
    .frame({ width: 100, height: 100 })
Curved line 
Path((path) => {
    path.move(0, 50)
    path.quadCurve(100, 50, 50, 0)
})
    .stroke(Color("red"), 3)
    .frame({ width: 100, height: 60 })
Arc 
Path((path) => {
    path.arc({
        centerX: 50,
        centerY: 50,
        radius: 40,
        startAngle: 0,
        endAngle: 270
    })
})
    .stroke(Color("blue"), 4)
    .frame({ width: 100, height: 100 })
Polyline chart 
Path((path) => {
    path.addLines([
        [0, 80], [20, 60], [40, 70],
        [60, 30], [80, 50], [100, 10]
    ])
})
    .stroke(Color("green"), 2)
    .frame({ width: 200, height: 100 })
Coordinates are relative to the Path’s own coordinate space — use .frame() to set the overall size. Path returns a Shape, so it can be used anywhere shapes are accepted, including .clipShape(), .background(), and .overlay(). Multiple subpaths can be created by calling move() multiple times within a single builder.

​
See also

  • LinearGradient — gradient fills for shapes
  • Color — solid color fills and strokes
  • Image — bitmap content to clip with shapes
  • ZStack — layer shapes behind or in front of content