Document card

A draggable card representing a document, title, optional excerpt, duration and meta. Drag it (mouse/pen), marquee-select it, or click without dragging to fire onOpen with a payload that includes the card's sourceRect (useful for shared-element open animations).

Layout & grids

Drag me, marquee-select me, or click to open.

6 minFoundations

Type scale

onOpen emits a generic payload with a sourceRect.

4 minTypography

Installation

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

Usage

import { DocumentCard } from "@/components/canvas/document-card";
 
<DocumentCard
  cardId="doc-1"
  duration="6 min"
  excerpt="A short summary…"
  meta="Foundations"
  onOpen={(state) => open(state)}
  title="Layout & grids"
  x={70}
  y={70}
/>;

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	—	Document title.
cardId*	string	—	Stable id for selection and the onOpen payload.
excerpt	string	—	Short summary line.
duration	string	—	Small label, e.g. a reading time.
meta	string	—	Right-aligned label, e.g. a category.
selected	boolean	—	Draws the selection ring.
onOpen	(state: DocumentOpenState) => void	—	Fires on a click (not a drag) with `{ cardId, title, sourceRect }`.