KQ-884 · GALLERY/STRIP

Gallery Strip

Several pictures in one message, without leaving the message. The strip is a real overflow-x-auto box inside the bubble with a fade at whichever end still holds pictures, each following a measured edge on a fast tween. Pressing a thumbnail opens a viewer in flow beneath it — the fold glides from 0 to a ResizeObserver-measured height on glide — where pictures cross-fade with a 4px nudge on snap whose direction follows the index delta, while the strip drives the active thumbnail to the centre with animate on glide. A roving tabindex steps the strip and Escape closes the viewer.

KQ-884 · GALLERY/STRIP

Survey run, quay four.
Rui · 6 pictures8:15

6 pictures · Crane bay

Install

One command — the source lands in your repo. Or copy it from the Code tab.

$ pnpm dlx shadcn@latest add @kinetiq/gallery-strip

Props

photos: GalleryPhoto[]; default —; The pictures in the strip's order: id, seed and caption.
openId / defaultOpenId: string | null; default null; Controlled or initial open picture; null closes the viewer.
onOpenChange: (id: string | null) => void; default —; Fires when the viewer opens, moves or closes.
onActiveChange: (id: string) => void; default —; Fires as the cursor moves along the strip, viewer or not.
from: "me" | "peer"; default "peer"; Which side the message takes.
text: string; default —; A line above the strip.
time: string; default —; Printed under the message, already formatted.
peerName: string; default "Them"; Names the sender under the message.
label: string; default —; Names the thread list for assistive technology.

Prop	Type	Default	Description
photos	GalleryPhoto[]	—	The pictures in the strip's order: id, seed and caption.
openId / defaultOpenId	string \| null	null	Controlled or initial open picture; null closes the viewer.
onOpenChange	(id: string \| null) => void	—	Fires when the viewer opens, moves or closes.
onActiveChange	(id: string) => void	—	Fires as the cursor moves along the strip, viewer or not.
from	"me" \| "peer"	"peer"	Which side the message takes.
text	string	—	A line above the strip.
time	string	—	Printed under the message, already formatted.
peerName	string	"Them"	Names the sender under the message.
label	string	—	Names the thread list for assistive technology.