shadcn.io is not affiliated with official shadcn/ui
Product Gallery Storefront Block for React
A zoom and pan viewer for one drawn satchel: three views from thumbnails, a 1x to 3x zoom slider, drag and keyboard panning held inside the picture, three detail crops that jump to their spot and a status line that names the zoom.
Installation
Overview
Let people look closely at one product with this product gallery for React with Base UI. A header introduces the Wicket Satchel. In a hairline frame with a plus mark on each corner, a stage holds the drawn satchel with three thumbnails under it (front, side and back). A Slider in the side cell zooms from 1x to 3x; the picture is a real transform of the drawing, you drag it to pan, and it can never be dragged off its edge. With the stage focused, plus and minus zoom, the arrow keys pan, and 0 or Escape resets. Three detail crops (stitching, buckle and lining), each with a tiny drawn preview, jump to their spot at 3x and, when needed, to the right view. The status line says things like Zoom 3x, centred on the buckle. It is a viewer, so there is nothing to buy; it suits a product page, a lookbook or a craft story.
FAQ
How do I use my own pictures?
Each view is a list of paths in a 100 by 100 box in frontShapes, sideShapes and backShapes. To use photographs, replace the Art inside the stage with an img of the same box and keep the wrapper that carries the transform, and give each crop a point (at) in the same 0 to 100 units. The zoom, pan and crops work on any picture.
How do zoom and pan work?
Zoom is held as a percent from 100 to 300. The offset is held in percent of the picture's own side and clamped to half of what the zoom adds, so an edge of the picture can reach the middle of the stage but never leave it. Changing the zoom keeps the point at the centre where it was.
Which keys work, and why no mouse wheel?
With the stage focused: plus (or equals) and minus change the zoom by a quarter, the four arrow keys pan once zoomed, and 0 or Escape resets. The wheel is left alone on purpose, so scrolling the page over the stage still scrolls the page. On a touch screen the stage lets the page scroll until you have zoomed in, and then it takes the drag.
What stays local in the demo?
Everything: the zoom, the pan and the view live in the page. There is no cart here. To make it a product page, put the add-to-bag controls from the product details block in the side cell.
How does it look on a phone?
The stage comes first at a fixed height, the thumbnails sit under it, and the zoom, the crops and the facts stack below. The status line is at the foot.
Is it accessible?
The stage is a focusable region with a hint that names its keys, the slider has a name and a spoken value such as 2x, the views are a named group of radios, and the crops are buttons that say whether they are pressed. The status line is a polite live region present from the start, and the drag path has a keyboard equal for everything it does. Motion is dropped under the reduced motion setting.