Zoom Canvas
A pannable, zoomable canvas with wheel / pinch zoom toward the cursor, drag to pan, and a zoom pill with Fit.
zoom-canvas.tsxzoom-canvas.css
Checking access…
Overview
Zoom centres on the pointer like design tools: wheel or trackpad pinch, or the − / + buttons. Drag the background to pan. The percentage pill resets to 100% on click, and Fit frames the content.
Use it for diagrams, floor plans, image review or any content bigger than its frame.
When to use
- Diagrams, maps, design review, image detail.
When not to use
- Small images: a lightbox is enough.
Installation
$
pnpm dlx shadcn@latest add https://sundaeui.dev/r/zoom-canvas.json$
npx shadcn@latest add https://sundaeui.dev/r/zoom-canvas.json$
yarn dlx shadcn@latest add https://sundaeui.dev/r/zoom-canvas.json$
bunx --bun shadcn@latest add https://sundaeui.dev/r/zoom-canvas.jsonWorks in any React project. Files are written to components/sundae/. Read the source in the stage’s Code view. Pro assets need a personal token. See authenticated installs.
- No dependencies beyond React 18 or later.
- Copy zoom-canvas.tsx and zoom-canvas.css into components/sundae/.
- The CSS file is imported by the component, so no extra configuration is needed.
- Import the component and use it as shown below.
Usage
import { ZoomCanvas } from '@/components/sundae/zoom-canvas'
<ZoomCanvas />Props
| Prop | Type | Default |
|---|---|---|
children*Content to zoom. | ReactNode | — |
contentSize*Natural size of the content. | { w: number; h: number } | — |
min / maxZoom bounds. | number | 0.25 / 4 |
fillSurface: dark or light. | 'dark' | 'light' | 'dark' |
Accessibility
- The viewport is focusable: + / − zoom, arrow keys pan, 0 fits.
- Zoom level is announced.
- Reduced motion removes the movement and keeps every state change.
Customization
- Colours are CSS custom properties on .sd-zmc; override them in your own stylesheet.
- fill="light" switches the built-in light palette.
Keyboard
- + / −
- Zoom
- Arrows
- Pan
- 0
- Fit
FAQ
- Is Zoom Canvas free?
- Zoom Canvas is part of Sundae Pro. The live preview is open to everyone; the source installs with a Pro account.
- How do I install Zoom Canvas?
- Run npx shadcn@latest add https://sundaeui.dev/r/zoom-canvas.json. The files are written to components/sundae/. It has no dependencies beyond React 18 or later.
- Does Zoom Canvas support keyboard and screen readers?
- The viewport is focusable: + / − zoom, arrow keys pan, 0 fits. Zoom level is announced.
- Does Zoom Canvas respect reduced motion?
- Reduced motion removes the movement and keeps every state change.
More like this
All components →Doc Viewer
Components · RefinedToast Stack
Components · Refined- Pro
Sheet Drawer
Components · Refined Avatar Stack
Components · Refined- Pro
Notification Center
Components · Refined Hold to Confirm
Components · Refined