# Design Review Board block

> Excalidraw Whiteboard for shadcn/ui with Frames, Presence, Templates and Versions

Embeddable Excalidraw whiteboard for shadcn/ui that fills any app content area and follows your tokens in light and dark: frames navigator, presence, templates, a shape library, PNG and SVG export, view only sharing and version restore.

- Type: Pro block
- Category: [Whiteboard](https://web.dev.reui.io/blocks/application/whiteboard.md)
- Page: https://web.dev.reui.io/blocks/application/whiteboard/whiteboard-1
- MCP: `get_block("whiteboard-1")`
- Built with: Alert Dialog, Avatar, Badge, Button, Button Group, Dialog, Dropdown Menu, Empty, Field, Icon Tile, Input, Input Group, Item, Kbd, Popover, Select, Separator, Sheet, Skeleton, Spinner, Switch, Tabs, Toggle, Toggle Group, Tooltip
- Installs with a ReUI Pro or Ultimate license; setup: https://web.dev.reui.io/docs/license-setup

## Best for

A design review board with restorable saved versions, a shape library fed from the selection and PNG or SVG export with a preview

## Agent notes

- `SEEDED_VERSIONS` fills the History tab and `saveVersion` only prepends a snapshot to React state, so versions vanish on reload
- `PresenceMenu` reads the fixed `VIEWERS` list and takes no viewers prop, so replace that list with your live session members
- `SharePopover` copies the fixed `BOARD.shareUrl` and Link access only adds an access=view query to it, so no sharing permission is saved anywhere

## When not to use

- Sprint planning where lanes of cards total story points against capacity: use [Sprint Planning Board](https://web.dev.reui.io/blocks/application/whiteboard/whiteboard-2.md) (`get_block("whiteboard-2")`)
- A wide gallery of searchable template thumbnails opened over the page, with no canvas: use [Template Library](https://web.dev.reui.io/blocks/application/dialog/dialog-5.md) (`get_block("dialog-5")`)

## Third-party libraries

- Excalidraw: [API reference](https://docs.excalidraw.com/docs/@excalidraw/excalidraw/api), [docs](https://docs.excalidraw.com/docs/@excalidraw/excalidraw/integration)
- Motion v12: [API reference](https://motion.dev/docs/react-motion-component), [docs](https://motion.dev/docs/react) (the docs follow the latest Motion, with no React API break since v12)
- Sonner v2: [API reference](https://sonner.emilkowal.ski/toast), [docs](https://sonner.emilkowal.ski/getting-started)

## Install

```bash
npx shadcn@latest add @reui/whiteboard-1
```

## About Whiteboard blocks

### When to use

- Design reviews, retros and user flow sketches on a hand drawn canvas inside your product
- Sprint planning on a shared canvas where lanes of cards total their points against capacity
- An Excalidraw editor themed by your shadcn tokens that autosaves and opens or saves board files

### When not to use

- A bordered panel with a header band around dense data, with nothing to draw on: use [Frame](https://web.dev.reui.io/components/frame.md) (`get_component("frame")`)
- An editable graph of connected steps, each with its own settings inspector: use the [Flow blocks](https://web.dev.reui.io/blocks/application/flow.md)
- Sprint work as cards dragged between stage columns, with no drawing canvas: use the [Kanban Board blocks](https://web.dev.reui.io/blocks/application/kanban-board.md)

### Agent notes

- `loadBoard` returns a demo scene and `saveBoard` only waits on a timer; wire both to your storage, as `onSave` hands over the whole scene
- Pin `@excalidraw/excalidraw` to 0.18.1: later releases rename the API and the editor DOM that the `Whiteboard` kit hides and proxies
- Each page.tsx gives the board an `h-svh` wrapper and the board fills its parent; inside an app shell give that parent a height in place of it

Every ReUI item has a twin like this one; the index is https://web.dev.reui.io/llms.txt. Agents with the ReUI MCP (https://web.dev.reui.io/docs/mcp) get the same guidance from the getters named above.