← ui-lab

Snap Canvas

A canvas that aligns shapes as you drag. When the dragged shape's edge comes within a threshold of the reference shape's edge, it snaps to exact alignment, a guide line shows, and the alignment is announced in a role="status" region. Drag the blue box toward the grey reference.

Preview

Installation

npx shadcn@latest add https://ui.publictheta.com/r/snap-canvas.json

Conformance

This component conforms to the @publictheta/ui-spec snap-canvas specification. Run the suite against any implementation with pnpm conformance.