Canvas card

An absolutely-positioned card you place on the canvas by x / y. It can render as a link by passing a router-agnostic linkComponent (e.g. next/link), and shows a selection ring when marquee-selected.

A plain card

Positioned at (60, 70). Drag on empty space to marquee-select it.

A link card

Pass linkComponent to make the whole card a router-aware link.

Installation

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

Usage

import Link from "next/link";
import { CanvasCard } from "@/components/canvas/canvas-card";
 
// A plain card
<CanvasCard cardId="a" x={60} y={60}>
  <div className="p-5">A card</div>
</CanvasCard>
 
// A link card
<CanvasCard cardId="b" href="/lesson" linkComponent={Link} x={360} y={140}>
  <div className="p-5">Open lesson →</div>
</CanvasCard>

Props

Prop	Type	Default	Description
x*	number	—	Left position on the canvas, in px.
y*	number	—	Top position on the canvas, in px.
children*	ReactNode	—	Card content.
width	number	280	Card width, in px.
href	string	—	When set, the card renders as a link.
linkComponent	ElementType	"a"	Component used for the link (e.g. `next/link`).
cardId	string	—	Marks the card selectable; reported by `onSelect`.
selected	boolean	—	Draws the selection ring.
className	string	—	Extra classes for the card surface.