UI
← Home

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.

  • Axe
  • Focus
  • Drag

Preview

Installation

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

Conformance

Verified against the @publictheta/ui-spec snap-canvas specification on both the React and vanilla reference implementations, across Chromium, Firefox, and WebKit.

  • Axe — No WCAG 2 A/AA axe-core violations
  • Focus — A visible focus indicator appears on keyboard focus (WCAG 2.4.7)
  • Drag — Pointer-drag surfaces don't select text or hijack touch scrolling

See the full conformance matrix across all components.