# Shape

Shape elements are vector primitives — useful for callouts, dividers, decorative blocks, and connecting elements. Click **Shape** in the top toolbar; pick a kind in the inspector.

## Four kinds

- **Rectangle** — most common. Solid fills, gradient fills (via theme tokens), rounded corners.
- **Ellipse** — circle (set `w` = `h`) or oval. Useful for badges, dot accents.
- **Line** — straight line between two endpoints. The bounding-box `position` defines the start/end.
- **Arrow** — line with an arrowhead at one end. Direction follows the bounding box.

## Inspector

<!-- omitted: ParamsTable -->

## Common patterns

**Filled callout:**

```json
{
  "type": "shape",
  "shape": "rectangle",
  "position": { "x": 80, "y": 800, "w": 1760, "h": 100 },
  "fill": "#fff5f0",
  "cornerRadius": 12
}
```

A pale orange band at the bottom of the slide for a callout strip.

**Outline border:**

```json
{
  "type": "shape",
  "shape": "rectangle",
  "position": { "x": 80, "y": 200, "w": 600, "h": 400 },
  "fill": "transparent",
  "stroke": { "color": "#e06540", "width": 2 },
  "cornerRadius": 16
}
```

An empty rounded rectangle — useful for highlighting a card.

**Connecting arrow:**

```json
{
  "type": "shape",
  "shape": "arrow",
  "position": { "x": 600, "y": 540, "w": 200, "h": 0 },
  "stroke": { "color": "#0EA5E9", "width": 3 }
}
```

Horizontal arrow connecting two slide regions.

> [!TIP]
> For the deepest visual impact, **always use theme tokens for fill colors** rather than literal hex codes. That way the shape inherits whatever palette you set in the deck inspector — and any [per-slide override](/docs/build/slides/theming#per-slide-override) — automatically. Hex codes paint themselves into a corner the moment you swap the theme.

## Schema reference

`Shape` element:

<!-- omitted: ParamsTable -->