Folder card

The signature Canvas kit component. A draggable folder that taps open to "peek": its items rise into a staggered masonry of preview cards. The front shows a circular-progress dial (the share of completed items, or an explicit progress). You control each preview's contents with a renderPreview render prop.

50%

4 Items

Foundations

Installation

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

Usage

import { FolderCard } from "@/components/canvas/folder-card";
 
const items = [
  { completed: true, id: "a", title: "Layout & grids" },
  { id: "b", title: "Spacing systems" },
];
 
<FolderCard
  folderId="foundations"
  items={items}
  renderPreview={(item, ctx) => (
    <div style={{ height: ctx.height, width: ctx.width }}>{item.title}</div>
  )}
  title="Foundations"
  x={160}
  y={220}
/>;

Props

Prop	Type	Default	Description
x*	number	—	Left position on the canvas, in px.
y*	number	—	Top position on the canvas, in px.
title*	string	—	Folder label.
folderId*	string	—	Stable id for selection and the open payload.
items*	CanvasFolderItem[]	—	Items revealed on peek: `{ id, title, completed? }`.
renderPreview	(item, ctx: { width; height }) => ReactNode	—	Render the contents of each raised preview card.
progress	number	—	Explicit 0–100 progress; defaults to the completed share.
selected	boolean	—	Draws the selection ring.
initialPeeked	boolean	—	Start in the peeked-open state.
onPeekChange	(peeked: boolean) => void	—	Fires when the folder peeks open or closed.
onOpenItem	(state: FolderOpenState) => void	—	Fires when a peeked item is clicked.