Installation

Canvas kit is distributed as a shadcn registry. If you already have a React + Tailwind v4 app with the shadcn CLI configured, adding a component is a single command.

Prerequisites

React 19 and Tailwind CSS v4.
A project initialised with shadcn (a components.json at the root). If you haven't, run npx shadcn@latest init first.

Install a component

Every item resolves its own dependencies, installing folder-card, for example, also pulls in use-draggable, circular-progress and the canvas-vars theme.

npx shadcn@latest add https://canvas.blode.co/r/folder-card.json

Install everything

To get the Canvas, cards, folders and sample data in one go, add the canvas-board block:

npx shadcn@latest add https://canvas.blode.co/r/canvas-board.json

Manual setup

Add the theme variables

Canvas kit reads its colours from --canvas-* CSS variables. Install the canvas-vars theme (or copy the variables into your globals.css):

npx shadcn@latest add https://canvas.blode.co/r/canvas-vars.json

Add the pieces you need

Browse the sidebar and install the canvas viewport plus any cards. Each registry item targets components/canvas/ (the components) and hooks/ (the hooks) by default.

Compose your canvas

Drop a <Canvas> somewhere full-bleed and place positioned children inside it. See canvas for the full example.

Where files land

Components install to components/canvas/, hooks to hooks/, and the circular-progress UI primitive to components/ui/. Adjust the targets in your components.json aliases if your layout differs.