Rect

Property	Default	Meaning
border-radius	0	Scalar, { x, y } / [x, y] pair, or side/corner object

Rect paints its allocated rectangle. It is a leaf: it has no content children. Use a Box when the rectangle should surround text or another element.

Size and paint

Rect accepts the shared sizing and style props. With no aspect, each axis is resolved independently. A finite offer can size the shape; an otherwise unconstrained axis falls back to 16px. A stack's main-axis allocation still follows explicit flex, not automatic filling.

aspect is width divided by height. For example, width={px(160)} aspect={2} gives a preferred height of 80px. Exact allocations take precedence over this preference. Set both dimensions when you need a specific rectangle.

The default paint is no fill and a black 1px stroke. Strokes are centered on the rectangle's boundary, so visible ink can extend beyond its layout rectangle. Use stroke={none} for a fill-only swatch.

Rounded corners

border-radius defaults to zero. A scalar rounds both axes equally; a pair sets elliptical corners. Pairs accept {x, y} or [x, y]:

Select sides or corners with t, b, l, r, tl, tr, bl, and br: border-radius={{ t: px(12), br: [px(6), px(3)] }} rounds both top corners and the bottom-right corner. Unspecified corners are square; explicit corners override sides. See Box for the shared precedence rules.

Fractional scalar radii use the shorter side. A pair's x/y fractions use width and height respectively. Radii must be nonnegative and are capped at half the corresponding side. RoundedRect is the same geometry with a nonzero default radius.