# Rectangle

```ts
import { Rectangle } from "@pibbl/core";
```

`Rectangle` uses [`RectangleProps`](/reference/types/elements-components/#rectangleprops) and [`RectStyle`](/reference/types/styles/#rectstyle). It rejects children and
accepts local box geometry, fill, stroke, events, cursor, filters, and optional
`cornerRadius` or `cornerRadii`. Its signed-box rounding uses native [`Canvas`](/reference/types/canvas-runtime/#canvas)
radius scaling and keeps paint and targeting aligned.

```tsx
<Rectangle
  style={{
    left: 24,
    top: 24,
    width: 180,
    height: 88,
    cornerRadius: 12,
    fill: "#2563eb",
  }}
/>
```

Try the [Rectangle live example](/playground/#/examples/drawing/rectangle).

## API details from source

<span id="api-Rectangle"></span>

Describes a rectangle primitive for JSX or createElement authoring.

```ts
Rectangle: PibblPrimitiveComponent<RectangleProps, PrimitiveInput<RectangleProps, RectStyle>>
```

Related API: [Rectangle](/reference/components/rectangle/), [PibblPrimitiveComponent](/reference/types/elements-components/#pibblprimitivecomponent), [RectangleProps](/reference/types/elements-components/#rectangleprops), [PrimitiveInput](/reference/types/styles/#primitiveinput), [RectStyle](/reference/types/styles/#rectstyle).

### Parameters

- **`props`** — Authored component inputs, supplied through JSX or createElement. See the linked
props and style types.

### Throws

When called directly; Pibbl mounts this component through JSX or createElement.

### See also

[RectangleProps](/reference/types/elements-components/#rectangleprops)

[RectStyle](/reference/types/styles/#rectstyle)

[View source — packages/core/src/lib/components/rect.ts:96](/source/packages/core/src/lib/components/rect-ts/#L96)

## Implementation guidance for agents

Read the [Drawing, layout, and effects companion](/agents/topics/layout/) for ownership, adaptation, failure modes, and verification. [Agent start](/agents/) provides the version-selection workflow.

## Complete minimal example

Compile this TSX module with `jsx: "react-jsx"` and `jsxImportSource: "@pibbl/core"`, then load it from a browser entry point after the document body exists. It creates and mounts one canvas; dispose the controller before removing or replacing that canvas. The interactive study linked below adds controls beyond this minimal use case.

[Download source](/minimal/rectangle.tsx)

```tsx
/** @jsxImportSource @pibbl/core */
import { pibbl, Rectangle } from '@pibbl/core';

const canvas = document.createElement('canvas');
canvas.width = 320;
canvas.height = 240;
document.body.append(canvas);

const controller = pibbl(canvas, (
<Rectangle
  style={{
    left: 24,
    top: 24,
    width: 180,
    height: 88,
    cornerRadius: 12,
    fill: "#2563eb",
  }}
/>
));

window.addEventListener('pagehide', () => controller.dispose(), { once: true });
```

## Complete minimal examples

- [Rounded and circular marks](/minimal-examples/drawing/round-shapes/): Draw a circle, ellipse, rounded rectangle, arc, and wedge with typed props and styles. [Plain source](/minimal/drawing/round-shapes.tsx)
## Interactive examples

- [Rectangle](/examples/rectangle/) · [Full page](/experience/rectangle/)
- [Filters](/examples/filters/) · [Full page](/experience/filters/)
- [Plasma Globe](/examples/plasma-globe/) · [Full page](/experience/plasma-globe/)
- [Underwater scene](/examples/underwater/) · [Full page](/experience/underwater/)
- [Optional filters](/examples/optional-filters/) · [Full page](/experience/optional-filters/)
## Documentation version

Documentation built with @pibbl/core 0.0.2, revision 272a94a. ALPHA — NOT FOR PRODUCTION USE.