UI
← Home

Zoomable Viewport

A zoomable, pannable viewport. Focus it and press `+`/`-` to zoom, or use Ctrl/Cmd+wheel (a trackpad pinch); a plain wheel pans. With touch, pinch two fingers to zoom toward the point between them and drag with one to pan. The current zoom is reflected in the accessible name.

  • Axe
  • Focus
  • Drag
  • Cancel

Preview

Installation

npx shadcn@latest add https://ui.publictheta.com/r/zoomable-viewport.json

Conformance

Verified against the @publictheta/ui-spec zoomable-viewport 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
  • Cancel — Escape mid-drag (and pointercancel, when the OS takes the gesture) restores the value the drag started from and ends it, so the release commits nothing

See the full conformance matrix across all components.