Canvas kit
The infinite-canvas UI from canvas.blode.co, packaged
as a shadcn registry you can install into
any React + Tailwind v4 project. Plain DOM and requestAnimationFrame, no
canvas engine, no WebGL.
Canvas kit
Pan with two fingers or scroll. Pinch or ⌘/Ctrl + scroll to zoom. Drag the folders, click to peek, then open a card to read it.
50%
4 Items
Foundations
40%
5 Items
Typography
33%
3 Items
Motion
Install everything
The canvas-board block pulls in the Canvas, cards, folders and sample data,
the fastest way to see it all working:
npx shadcn@latest add https://canvas.blode.co/r/canvas-board.jsonPrefer to add pieces individually? Every item is installable on its own, see Installation and the per-component pages in the sidebar.
What's included
| Item | Type | What it is |
|---|---|---|
canvas-vars | theme | --canvas-* CSS variables (light + dark) |
use-canvas | hook | Pan / zoom / grab / marquee / fit-to-content engine |
use-draggable | hook | Scale-aware pointer drag with a tap/drag threshold |
use-canvas-state | hook | Persists camera + peeked folder to localStorage |
circular-progress | ui | SVG progress dial used on folder fronts |
canvas | component | The full-bleed viewport |
canvas-card | component | Positioned card, optionally a router-aware link |
document-card | component | Draggable document card with an onOpen payload |
folder-card | component | The signature folder: tap to peek into a masonry |
canvas-board | block | A complete, self-contained demo composing all of the above |
Principles
- No engine. Everything is DOM + CSS transforms driven by
requestAnimationFrame. Cards are real, accessible elements. - Composable. Install only what you need; each item declares its own dependencies and pulls them in automatically.
- Motion is information. Peek, drag and zoom communicate structure, they're not decoration.
Open the live demo for the full-bleed experience.