Shadcn Excalidraw Whiteboard Blocks for Team Canvases

For AI Agents

Hand your agent this brief or the ReUI MCP, not a screenshot. Installs with a ReUI Pro or Ultimate license.

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 the Frame component
An editable graph of connected steps, each with its own settings inspector: use the Flow blocks
Sprint work as cards dragged between stage columns, with no drawing canvas: use the Kanban Board blocks

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

Third-party API docs

Excalidraw: API reference, docs, used by 2 of 2 blocks
Motion v12: API reference, docs, used by 2 of 2 blocks (the docs follow the latest Motion, with no React API break since v12)
Sonner v2: API reference, docs, used by 2 of 2 blocks

Markdownhttps://web.dev.reui.io/blocks/application/whiteboard.md

MCPsearch({ query: "whiteboard", type: "block", category: "whiteboard" })

Full index for agents:llms.txtReUI MCP setup

Shadcn Excalidraw Whiteboard Blocks: Design Reviews and Sprint Planning

Rendering Excalidraw in a React app takes a component and its stylesheet. The rest is glue: the editor does not render on the server, its toolbar and menus wear Excalidraw's look instead of your tokens, and autosave or a library in your own panel is left to you.

Each of these 2 blocks ships that glue as its own copy of a Whiteboard embed, inside a finished board: a design review or a sprint planning room. The embed loads the editor in the browser only, maps its CSS variables onto your shadcn tokens in light and dark, and swaps its tools, board menu and footer for ToggleGroup, DropdownMenu, ButtonGroup and Tooltip in your ReUI style. The planning room's copy adds follow, element updates and overlays anchored to the canvas.

All Whiteboard Blocks

Open any block on its own page for a live preview, the components it is built from, and the install command.

Design Review Board Excalidraw Whiteboard for shadcn/ui with Frames, Presence, Templates and Versions
Sprint Planning Board Excalidraw Sprint Planning Board with Capacity Lanes, Presence, Follow Mode and Decision Log

Design Review Board: Frames, Library, Export and History

The first block opens Checkout Review, a board of 5 frames: goals, a user flow, a phone wireframe, open questions and decisions.

A side panel, docked on a wide board and a Sheet on a narrow one, lists every frame with its item count and searches frame names and board text. Its Library tab holds 4 templates and a personal shape library that insert or drag onto the canvas, and Add Selection saves the selection as a new shape.

Export downloads or copies the board, the selection or 1 frame as PNG at 1x, 2x or 3x or as SVG, with a live preview and switches for Background (off for a transparent image), Dark and Editable (the file opens back as a board). Share pairs the board link with a View only switch. History starts with 3 seeded versions, saves named ones in component state for you to persist, and restores any of them behind a confirm, with Undo on the toast.

Sprint Planning Board: The Drawing Is the Plan

The second block, Sprint 42 Planning, reads its numbers from the canvas instead of a form beside it.

Lanes are Excalidraw frames that keep an owner and a capacity in their custom data, and a card's points are the last N pts in its own text. Drag a card to another lane or retype its points and the Plan tab re-totals each lane against its capacity, with an Over by badge on any lane past it.

Estimate Together runs planning poker on 1 card, flags any outlier, and Use writes the median into the card as a single undo step. Present makes the board view only and dims all but the current frame, Follow glides your view to a teammate's, and the Log tab keeps decisions and actions linked to the canvas, with Copy Summary as Markdown. The teammates, their views, selection outlines and votes are fixtures, and there are no live cursors.

Related Shadcn Block Categories

Flow Blocks (4 blocks) Node canvases on React Flow, for a board that is a graph with rules.
Kanban Board Blocks (10 blocks) Drag and drop columns for the work a planning session commits to.
Gantt Blocks (4 blocks) Task trees and timeline bars for roadmaps longer than a sprint.
Rich Text Editor Blocks (5 blocks) Tiptap editors for the docs and notes that sit beside a board.
Timeline Blocks (9 blocks) Activity feeds and audit histories for who changed what.
App Shell Blocks (35 blocks) Sidebars, rails and top bars whose content area a whiteboard fills.

All Shadcn Block Groups

Browse the full ReUI Shadcn blocks library by product surface. Each group bundles category-level blocks you can mix and match across your project.

Shadcn Application Blocks (303) Browse 303 Shadcn Application blocks across 23 categories.
Shadcn Data Grid Blocks (47) Browse 47 Shadcn Data Grid blocks across 9 categories.
Shadcn Charts Blocks (52) Browse 52 Shadcn Charts blocks across 10 categories.
Shadcn Solutions Blocks (76) Browse 76 Shadcn Solutions blocks across 11 categories.
Shadcn AI & Agents Blocks (22) Browse 22 Shadcn AI & Agents blocks across 3 categories.
Shadcn eCommerce Blocks (87) Browse 87 Shadcn eCommerce blocks across 13 categories.
Shadcn Marketing Blocks (67) Browse 67 Shadcn Marketing blocks across 8 categories.

Frequently Asked Questions

Do I need an Excalidraw license or account to use these?

No. The blocks are built on the open source Excalidraw editor, @excalidraw/excalidraw, which is MIT licensed, and nothing signs in to excalidraw.com. By default the editor fetches its fonts from esm.sh, so a strict CSP must allow it, or point the assetPath prop at a self-hosted copy of the package's fonts.

Is the collaboration live?

Not out of the box. Edits, versions and the log live in memory: the preview's onSave is a 600ms stand-in that stores nothing, and the seeded versions and log entries are fixtures. There is no realtime server either, so the people in both headers, the planning room's selection outlines, the views Follow moves to and the other Estimate Together votes are fixtures too. Pass what your realtime layer receives to the controller's setCollaborators and the canvas draws it, cursors included when you send a pointer.

How do I save and load a board?

initialData takes stored elements, authored skeletons, images and a shape library, as an object or an async function read once on mount. onSave receives a self-contained scene (live elements, only the images they use, grid and snap state and a version hash) to store as JSON and pass back. It runs after edits idle, when the page hides and on unmount, and a rejected save shows Save failed and retries on the next change. Save to File and Open File round trip .excalidraw files too.

Does it work with Next.js server rendering?

Yes. The embed imports only Excalidraw's types at the top level and loads the editor with React.lazy after mount, so the server renders a skeleton shaped like the controls and never the editor. It needs no next/dynamic, so it runs outside Next.js too. Keep 1 live board per page, since the editor holds module level state.

How do I install a whiteboard block?

Open the block on its page, copy the install command (the shadcn CLI with the @reui registry and your license key) or the AI prompt, and run it in your project. The block, its fixtures, its Whiteboard embed and every ReUI and shadcn dependency land in a single command, with @excalidraw/excalidraw alongside. The install pins that package to 0.18.1, the version the embed is built against, because the embed hides and proxies parts of that release's API and markup, so re-check it before you upgrade.

Is a license needed?

Whiteboard blocks are part of ReUI Pro: a single payment, lifetime updates, every block in every style. The ReUI primitives and the free examples they build on install with no license.

Start building with ReUI Pro today.

Every Pro block, every style, and every future addition, with one license for unlimited projects.

Get All-Access

From $249, once. Lifetime updates.