shadcn.io is not affiliated with official shadcn/ui
Zoom and Pan Viewer Gallery Block for React
A framed viewport onto one large drawn city plan that you zoom and pan by buttons, a slider, keys, drag, double-click, Control or Command with the wheel, and a two-finger pinch.
Installation
Overview
A free viewer for React with Base UI, for Plansight, a plan-viewing app. A split holds the controls at the start and, at the end, a framed viewport onto one large drawn plan of an invented quarter: streets, blocks, a river with three bridges, a park, a square and a station. Zoom out, Zoom in and Reset are buttons, a readout says "200%", and from lg a slider and a short list of keys sit under them. Drag the plan to pan it, double-click to zoom in, hold Control or Command and scroll to zoom about the pointer, or pinch with two fingers on touch. With the viewport focused the arrow keys pan, plus and minus zoom and zero shows the whole plan again. The pan is clamped so the plan never leaves the frame. The plan is redrawn for each view rather than scaled, so its lines stay crisp; streets are named from the start, buildings appear at 200% and plot numbers on Quay Street at 350%. It's built from Slider, Button, Kbd, Badge and Guides.
FAQ
Does the viewer trap the page's scrolling?
No. A plain mouse wheel scrolls the page as usual; only Control or Command with the wheel (which is also how a trackpad pinch arrives) zooms the plan. On touch, a one-finger drag scrolls the page while the plan is whole and pans it once it is zoomed in, and two fingers pinch.
Which keys work?
Focus the viewport (an application region named "Plan of Elm Quarter") and press plus or minus to zoom, zero to show the whole plan, and an arrow key to pan once zoomed in. Keys with Control, Command or Alt are left to the browser. A polite line announces the zoom, and a hidden description tells screen-reader users the keys.
What does a phone get?
The viewport sits above the buttons, and the slider and the key list are hidden below lg; pinch and drag cover what they would. Nothing scrolls sideways at 320 pixels.
Do the arrow keys flip in a right-to-left page?
No. The plan is a map, so the arrows pan it in the direction they point in every language.
Related
- Pro
Panorama Viewer Gallery
Compare, crop and zoomA drawn alpine valley seven times wider than tall in a framed scroll region you can drag or scroll with the arrow keys, with a minimap that follows the view, a zoom slider from 100% to 300% and a Reset button.
- Pro
Lightbox Gallery
Stage and thumbnailsNine pictures of a photography studio's year on shared hairlines, a featured frame and a caption under each, where every frame opens one viewer dialog with the whole picture, its credit, Previous and Next, a counter, arrow keys and a swipe.
- Pro
Floor Plan Unit Types Gallery
Annotated picturesFour unit layouts drawn to one scale on a metre grid, picked from a toggle group, with a Furnished switch, numbered rooms and a room table whose rows ring their room in the plan.
- Pro
Zoom Focus Master Detail Features
Tabs and accordionsA features section for a design-token system: a framed panel at full size beside six vertical tabs that are its own thumbnails; choosing one scales the panel up from that row.
- Pro
Split View Gallery
Stage and thumbnailsAn asset-review split: a listbox of eight files with small drawings at the start, the chosen file's preview and details at the end, and a divider you drag or arrow to resize.
- Pro
Floor Plan About
Team and officesAn interactive floor plan for a space-planning company, where choosing one of six rooms rings it on the drawing and shows its seats and amenities.