Shapes

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.

(style: Style) => Shape

Fills the rectangle interior with a color, gradient, or other 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;

object

Configuration options for the rounded rectangle.

Show properties

number

The radius of the rounded corners in points. Defaults to 0 if omitted (equivalent to Rectangle).

(style: Style) => Shape

Fills the rounded rectangle interior with a color, gradient, or other 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.

(style: Style) => Shape

Fills the circle interior with a color, gradient, or other 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.

(style: Style) => Shape

Fills the ellipse interior with a color, gradient, or other 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).

(style: Style) => Shape

Fills the capsule interior with a color, gradient, or other 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;

(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:

(x: number, y: number) => void

Begins a new subpath at the given point.

(x: number, y: number) => void

Adds a straight line from the current point to the given point.

(x: number, y: number, controlX: number, controlY: number) => void

Adds a quadratic Bezier curve to the given point with one control point.

(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.

(props: { centerX: number; centerY: number; radius: number; startAngle: number; endAngle: number; clockwise?: boolean }) => void

Adds an arc. Angles are specified in degrees.

(x: number, y: number, width: number, height: number) => void

Adds a rectangle subpath.

(props: { x: number; y: number; width: number; height: number; cornerWidth: number; cornerHeight: number }) => void

Adds a rounded rectangle subpath.

(x: number, y: number, width: number, height: number) => void

Adds an ellipse subpath inscribed in the given rectangle.

(points: [number, number][]) => void

Adds a polyline from an array of [x, y] coordinate pairs.

() => 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:

(style: Style) => Shape

Fills the path interior with a color, gradient, or other 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.

Introduction

Authoring

Components

Components — iOS Extensions

Components — Web Extensions

Modifiers

Modifiers — iOS Extensions

Hooks and Globals

Styles

Types

Rectangle

RoundedRectangle

Circle

Ellipse

Capsule

Path

See also

​Rectangle

​RoundedRectangle

​Circle

​Ellipse

​Capsule

​Path

​See also

Rectangle

RoundedRectangle

Circle

Ellipse

Capsule

Path

See also