Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Gallery blocks

Pro

Zoom and Pan Viewer Gallery Block for Solid

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.

Framework
UI library

Preview

Preview width

Installation

Part of Pro
Pro unlocks the code and one-line install of every Pro button and text effect, plus the MCP for your AI editor.
Get ProSign in
Have Pro already? Sign in to open it.Opens here as soon as you're Pro.

Overview

A free viewer for Solid with Ark 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.

How do I show my own plan?

Replace the generated Plan component with your own SVG (or an image) that fills the same box and keep the viewBox set from the view. The detail thresholds are two constants, BUILDINGS_FROM and PLOTS_FROM.

Does anything move by itself?

No. The view changes only when you act, and the fade of the buildings is a short transition that is dropped under reduced motion.

All 100 gallery blocks