Rectangle

import { Rectangle } from 'cx/svg';

The Rectangle component is a CxJS version of the SVG rect element designed for responsive layouts. Unlike native rect which requires absolute x, y, width, and height values, Rectangle uses bounded object properties to automatically adapt to its container.

This example shows 16 rectangles arranged in a 4×4 grid using anchors to define their positions. Notice the rounded corners on the first row using different rx/ry values.

 <Svg style="width: 400px; height: 400px; border: 1px dashed #ddd" padding={5}>
  <Rectangle anchors="0 .25 .25 0" margin={5} colorIndex={0} rx={5} />
  <Rectangle anchors="0 .5 .25 .25" margin={5} colorIndex={1} ry="5%" />
  <Rectangle
    anchors="0 .75 .25 .5"
    margin={5}
    colorIndex={2}
    rx="9px"
    ry="25"
  />
  <Rectangle anchors="0 1 .25 .75" margin={5} colorIndex={3} rx="3em" />

  <Rectangle anchors=".25 .25 .5 0" margin={5} colorIndex={7} />
  <Rectangle anchors=".25 .5 .5 .25" margin={5} colorIndex={6} />
  <Rectangle anchors=".25 .75 .5 .5" margin={5} colorIndex={5} />
  <Rectangle anchors=".25 1 .5 .75" margin={5} colorIndex={4} />

  <Rectangle anchors=".5 .25 .75 0" margin={5} colorIndex={8} />
  <Rectangle anchors=".5 .5 .75 .25" margin={5} colorIndex={9} />
  <Rectangle anchors=".5 .75 .75 .5" margin={5} colorIndex={10} />
  <Rectangle anchors=".5 1 .75 .75" margin={5} colorIndex={11} />

  <Rectangle anchors=".75 .25 1 0" margin={5} colorIndex={15} />
  <Rectangle anchors=".75 .5 1 .25" margin={5} colorIndex={14} />
  <Rectangle anchors=".75 .75 1 .5" margin={5} colorIndex={13} />
  <Rectangle anchors=".75 1 1 .75" margin={5} colorIndex={12} />
</Svg> 

Rounded Corners

Use rx and ry to create rounded corners:

rx={5} — 5 pixel horizontal radius
ry="5%" — 5% of rectangle height as vertical radius
rx="9px" ry="25" — different horizontal and vertical radii
rx="3em" — CSS units are supported

If only rx is specified, ry defaults to the same value (and vice versa).

Colors

The colorIndex property assigns both fill and stroke from the default color palette. You can override this with custom fill, stroke, or style properties.

Configuration

Property	Type	Description
`anchors`	`string/number`	Position within parent bounds. Format: `"t r b l"`. See Svg for details.
`offset`	`string/number`	Translate edges in pixels. Format: `"t r b l"`. See Svg for details.
`margin`	`string/number`	CSS-like margin. See Svg for details.
`padding`	`string/number`	Padding applied before passing bounds to children.
`fill`	`string`	Fill color for the rectangle.
`stroke`	`string`	Stroke color for the outline.
`colorIndex`	`number`	Index in the default color palette. Sets both `fill` and `stroke`.
`rx`	`string/number`	Horizontal corner radius. Defaults to `ry` if not specified.
`ry`	`string/number`	Vertical corner radius. Defaults to `rx` if not specified.