> ## Documentation Index
> Fetch the complete documentation index at: https://docs.hyperwisor.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Rectangle

> A rectangle shape for layout, framing, and decoration.

<Info>
  **Category:** Shapes · **Decorative:** no data binding
</Info>

## Mental model

A **Rectangle is a frame or panel.** A vector box you use to group, frame, or divide
the canvas visually.

## When to use it

* Group related widgets inside a panel
* Backgrounds, dividers, framing

## Settings

Shapes share a common set: **fill** (interior color), **stroke** (outline color +
width), **opacity**, and an optional **rotation speed**. The Rectangle adds a
**corner radius** for rounded corners.

## Script API example

The same interactions from a [dashboard script](/script/overview):

```js theme={null}
// Use a rectangle as a toggleable panel background
widget.on('advToggle', 'toggle', (on) => on ? widget.show('panelBg') : widget.hide('panelBg'));
```

<Card title="All shapes" icon="shapes" href="/dashboard/widgets/shapes">
  The shared shape settings.
</Card>