# Rectangle

```ts
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](./svg#bounded-objects) 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.

```tsx
import { Svg, Rectangle } from "cx/svg";

export default (
  <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](./svg) for details.  |
| `offset`     | `string/number` | Translate edges in pixels. Format: `"t r b l"`. See [Svg](./svg) for details.      |
| `margin`     | `string/number` | CSS-like margin. See [Svg](./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.                         |