Canvas ring

The absolutely-positioned ring drawn around a canvas card when it is selected or being dragged. It is shared by canvas-card, document-card and folder-card so the selection and drag visuals stay in lockstep across every card type.

The selection variant uses --canvas-selection; the drag variant uses --canvas-drag-ring. Both come from canvas-vars, so the ring follows your theme automatically.

Installation

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

Usage

Render it inside a relative container, the ring positions itself with inset, so a negative value pulls it just outside the card. Drive active from your selection or drag state.

import { CanvasRing } from "@/components/canvas/canvas-ring";
 
<div className="relative rounded-2xl border bg-background p-5">
  <CanvasRing active={selected} inset={-4} thickness={2} />
  {/* card content */}
</div>;

To match the drag affordance instead, switch the variant:

<CanvasRing active={isDragging} variant="drag" />

Props