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
positiondefines the start/end. - Arrow — line with an arrowhead at one end. Direction follows the bounding box.
Inspector
| Name | Type | Description |
|---|---|---|
| shape* | "rectangle" | "ellipse" | "line" | "arrow" | Which primitive to render. |
| fill | string | Hex, RGB, or theme token (`accent`, `surface`, etc.). Lines/arrows ignore fill. |
| stroke | { color: string; width: number } | Border color + width in px. Required for line/arrow; optional for rectangle/ellipse. |
| cornerRadius | number (px) | Rectangles only. Default: 0 (sharp corners). |
Common patterns
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 — automatically. Hex codes paint themselves into a corner the moment you swap the theme.
Schema reference
Shape element:
| Name | Type | Description |
|---|---|---|
| type* | "shape" | Discriminator |
| shape* | "rectangle" | "ellipse" | "line" | "arrow" | Primitive kind |
| fill | string | Fill color (hex / token) |
| stroke | { color: string; width: number } | Border |
| cornerRadius | number | Rectangles only |