KQ-582 · ZOOM/GALLERY
Zoom Gallery
A product gallery with a loupe. Choosing a thumbnail cross-fades the frame while the arriving picture settles from a hair over full size on glide, and the selection ring travels between thumbnails on a shared layoutId; hovering the frame opens a scaled copy translated so the point under the pointer stays under it, clamped to the picture's edges. The thumbnails are a tablist — Left and Right swap pictures, Home and End jump — and a pressed Zoom button opens the pane centred for the keyboard, with Arrow keys panning and Escape closing.
KQ-582 · ZOOM/GALLERY
Waylight lamp, front
Waylight lamp, front
Waylight lamp, front · zoom off
Install
One command — the source lands in your repo. Or copy it from the Code tab.
$ pnpm dlx shadcn@latest add @kinetiq/zoom-gallery
Props
- images
- { id: string; alt: string; art: React.ReactNode }[]
- default —
- Pictures; art is rendered in the thumbnail, the frame, and the zoom pane.
- zoom
- number
- default 2
- Magnification of the zoom pane.
- value / defaultValue
- string
- default —
- Controlled or initial active picture id.
- onValueChange
- (id: string) => void
- default —
- Fires when another picture is chosen.
- onZoomChange
- (zoomed: boolean) => void
- default —
- Fires when the zoom pane opens or closes.
| Prop | Type | Default | Description |
|---|---|---|---|
| images | { id: string; alt: string; art: React.ReactNode }[] | — | Pictures; art is rendered in the thumbnail, the frame, and the zoom pane. |
| zoom | number | 2 | Magnification of the zoom pane. |
| value / defaultValue | string | — | Controlled or initial active picture id. |
| onValueChange | (id: string) => void | — | Fires when another picture is chosen. |
| onZoomChange | (zoomed: boolean) => void | — | Fires when the zoom pane opens or closes. |