Shadcn Excalidraw Whiteboard Blocks for Team Canvases

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.

Whiteboard 1 Excalidraw Whiteboard for shadcn/ui with Frames, Presence, Templates and Versions
Whiteboard 2 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 (31 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 (344) Browse 344 Shadcn Application blocks across 24 categories.
Shadcn Data Grid Blocks (39) Browse 39 Shadcn Data Grid blocks across 8 categories.
Shadcn Solutions Blocks (74) Browse 74 Shadcn Solutions blocks across 10 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.
Shadcn AI & Agents Blocks (18) Browse 18 Shadcn AI & Agents blocks across 2 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.