Rectangle

Draws a rectangle with optional rounded corners for use with backgrounds, progress bars, and borders. background fills the interior, stroke strokes, lineWidth and strokePosition control the width and position of the stroke.

Example

function main() {
  return (
    <Rectangle
      width={160}
      height={80}
      cornerRadius={16}
      background={LinearGradient(['#A9E56F', '#30B3A2'])}
      stroke={$env.foreground}
      lineWidth={2}
      strokePosition="inside"
    />
  );
}

Usage

background fills the rectangle; stroke traces its contour. cornerRadius is limited to half the shorter side. inside keeps strokes within the contour, center straddles it and outside extends beyond it. Parent clipping may cut off outside strokes.
mask uses alpha: opaque areas reveal, transparent areas hide. Black and white with equal alpha behave identically. A mask does not affect the subject’s layout; size it explicitly and distinguish it from clipped bounds.
background and stroke accept Paint: Color or Gradient. Construct gradients with LinearGradient, RadialGradient or AngularGradient. Stop locations and centers use 0–1; radial radii use points. HDR wraps one color; visible brightness depends on device and display environment.

Properties

background?Paint

Background paint; accepts a color or gradient. Use clear for transparency.

ExampleHDR($env.dark ? "white" : "black")

cornerRadius?number

Corner radius in points.

Example0

stroke?Paint

Stroke paint; accepts a color or gradient. Use clear to hide the stroke.

Example"clear"

lineWidth?number

Stroke thickness in points; 0 draws no stroke.

Example2

strokePosition?"inside" | "center" | "outside"

Stroke placement relative to the shape boundary: inside, center or outside.

Example"inside"

lineCap?"round" | "butt" | "square"

Stroke end shape: butt stops at the endpoint, square extends it, round rounds it.

Example"round"

lineJoin?"round" | "miter" | "bevel"

Shape of joined stroke segments: miter, round or bevel.

Example"round"

dash?number[]

Alternating painted and empty lengths in points; an empty array makes a solid stroke.

Example[]

dashPhase?number

Offset along the dash pattern, in points.

Example0

trimStart?number

Visible path interval from trimStart to trimEnd, within 0–1. Circle/Ellipse/Arc use angles instead.

Example0

trimEnd?number

Visible path interval from trimStart to trimEnd, within 0–1. Circle/Ellipse/Arc use angles instead.

Example1

Common properties

width?number | "auto" | "fill"

Width in points, auto sizing or parent fill.

Example"fill"

height?number | "auto" | "fill"

Height in points, auto sizing or parent fill.

Example"fill"

x?number

Visual offset in points: x moves right, y moves down. Does not change layout space.

Example0

y?number

Visual offset in points: x moves right, y moves down. Does not change layout space.

Example0

transform?ViewTransform

Transform the whole View without changing layout. Translation uses points; rotation/skew use degrees; scale 1 is unchanged; anchors use 0–1.

Example{rotation: 0}

opacity?number

Opacity of the whole View: 0 is transparent, 1 is opaque.

Example1

clipped?boolean

Clip drawing that extends beyond the View bounds.

Examplefalse

clip?"rectangle" | "ellipse"

Clipping shape: rectangle or ellipse. Material also accepts false to disable clipping.

Example"rectangle"

mask?View | null

Alpha mask View. Centered without affecting layout; null disables masking.

Example<Circle width="fill" height="fill" background="white"/>

zIndex?number

Drawing order among siblings; larger values appear in front.

Example0

blur?number

Blur radius in points; 0 disables blur.

Example4

innerShadow?DrawingEffect

Effect color, opacity, blur radius and x/y offset. Distances are in points.

Example{color: HDR("black"), opacity: 0.5, radius: 4, x: 0, y: 2}

glow?DrawingEffect

Effect color, opacity, blur radius and x/y offset. Distances are in points.

Example{color: HDR("cyan"), radius: 8, opacity: 0.8}

shadowColor?Color

Color of the outer shadow.

ExampleHDR("black")

shadowOpacity?number

Outer shadow opacity from 0 to 1; 0 hides it.

Example0

shadowRadius?number

Outer shadow blur radius in points.

Example4

shadowX?number

Outer shadow offset in points: x right, y down.

Example0

shadowY?number

Outer shadow offset in points: x right, y down.

Example2

animations?Animation[]

Animate a supported property when it changes. duration/delay use seconds; from/to set endpoints; repeat and autoreverse control repetition; wrap sets a periodic range.

Example[{property: "opacity", duration: 0.25, curve: "easeInOut"}]

key?string | number

Stable identity among siblings.

Practical example

function main() {
  return (
    <HStack spacing={20}>
      <Rectangle
        width={90}
        height={60}
        background="clear"
        stroke={$env.accent}
        lineWidth={8}
        strokePosition="inside"
      />
      <Rectangle
        width={90}
        height={60}
        background="clear"
        stroke={$env.accent}
        lineWidth={8}
        strokePosition="outside"
      />
    </HStack>
  );
}

Animation

widthheightxyopacitybackgroundcornerRadiusblurshadowColorshadowOpacityshadowRadiusshadowXshadowYtrimStarttrimEnddashPhasestrokelineWidthtransform.translateXtransform.translateYtransform.scaleXtransform.scaleYtransform.rotationtransform.skewXtransform.skewYtransform.anchorXtransform.anchorY

When omitted

The table lists omission behavior verified against implementation. Property examples are copyable syntax, not defaults. Pass explicit values for a fixed result; contextual dimensions and theme colors are not fixed constants.

Properties	When omitted
`cornerRadius`	`0`
`lineWidth`	`2`
`strokePosition`	`"inside"`
`trimStart`	`0`
`trimEnd`	`1`
`background`	`HDR($env.dark ? 'white' : 'black')`

Example

Usage

Properties

Practical example

Animation

When omitted

Color / Gradient

ZStack

On this page

Rectangle

Example

Usage

Properties

Practical example

Animation

When omitted

Related APIs

Color / Gradient

ZStack

On this page