Scripting
Getting Started
Documentation
Changelog
Privacy
Getting Started
Documentation
Changelog
Privacy

Shapes

Scripting provides a suite of shape components for creating scalable, vector-based UI elements such as rectangles, circles, capsules, ellipses, and rounded rectangles. These shapes support customizable fill, stroke, trimming, and sizing, making them ideal for dashboards, decorative elements, and interactive visuals.

Common ShapeProps

All shape components support the following properties for visual customization:

1type ShapeProps = {
2  trim?: {
3    from: number
4    to: number
5  }
6  fill?: ShapeStyle | DynamicShapeStyle
7  stroke?: ShapeStyle | DynamicShapeStyle | {
8    shapeStyle: ShapeStyle | DynamicShapeStyle
9    strokeStyle: StrokeStyle
10  }
11  strokeLineWidth?: number // Deprecated
12}

Property Descriptions

Property Type Description
trim { from: number; to: number } Renders only a portion of the shape’s path. Both from and to are fractions between 0.0 and 1.0.
fill ShapeStyle | DynamicShapeStyle Fills the shape with a solid color or gradient.
stroke ShapeStyle | DynamicShapeStyle | { shapeStyle, strokeStyle } Outlines the shape with a customizable stroke. Supports color, gradient, and stroke style configuration.
strokeLineWidth number (Deprecated) Sets the stroke width. Prefer strokeStyle.lineWidth for more control.

StrokeStyle

To define the appearance of a shape’s stroke, you can use the strokeStyle object:

1type StrokeStyle = {
2  lineWidth?: number
3  lineCap?: 'butt' | 'round' | 'square'
4  lineJoin?: 'bevel' | 'miter' | 'round'
5  mitterLimit?: number
6  dash?: number[]
7  dashPhase?: number
8}

StrokeStyle Options

Property Description
lineWidth Width of the stroke line in points.
lineCap Shape of the endpoints: "butt" (flat), "round" (rounded), or "square" (square-ended).
lineJoin Join style for corners: "miter", "round", or "bevel".
mitterLimit Limit for miter joins. Used when lineJoin is "miter".
dash Array of numbers that define the lengths of painted and unpainted segments.
dashPhase How far into the dash pattern to start the drawing.

Supported Shape Components

Rectangle

A basic rectangle.

1<Rectangle
2  fill="orange"
3  stroke={{
4    shapeStyle: "red",
5    strokeStyle: {
6      lineWidth: 3,
7      lineJoin: "round"
8    }
9  }}
10  frame={{ width: 100, height: 100 }}
11/>

RoundedRectangle

A rectangle with uniformly or dimensionally rounded corners.

1<RoundedRectangle
2  fill="blue"
3  cornerRadius={16}
4  frame={{ width: 100, height: 100 }}
5/>

UnevenRoundedRectangle

A rectangle with individually configurable corner radii.

1<UnevenRoundedRectangle
2  fill="brown"
3  topLeadingRadius={16}
4  topTrailingRadius={0}
5  bottomLeadingRadius={0}
6  bottomTrailingRadius={16}
7  frame={{ width: 100, height: 50 }}
8/>

Circle

A circle centered within its frame.

1<Circle
2  stroke="purple"
3  strokeLineWidth={4}
4  frame={{ width: 100, height: 100 }}
5/>

Capsule

An elongated shape with fully rounded ends.

1<Capsule
2  fill="systemIndigo"
3  frame={{ width: 100, height: 40 }}
4/>

Ellipse

An oval shape fitted inside a rectangular frame.

1<Ellipse
2  fill="green"
3  frame={{ width: 40, height: 100 }}
4/>

Notes

  • To apply advanced stroke customization (e.g. dashed outlines), use the strokeStyle object.
  • The strokeLineWidth property is deprecated and should be replaced with stroke.strokeStyle.lineWidth.
  • The trim modifier is particularly useful for animations (e.g., animated drawing of progress rings).
  • All shapes are compatible with layout modifiers like frame, padding, and background.
Outline