Gallery 110 - Contact Sheet with Loupe

Pro

A contact sheet of numbered frames where selecting one draws a red grease pencil circle around it and opens it full size beside the sheet, with keyboard and button navigation.

Shadcn Gallery 110 block

Component data

ID
gallery110
Access
pro
Created
Oct 24, 2026
Type
block
Libraries
Radix UI, Base UI, React Aria

Gallery 110 block design & features

Gallery110 is a two column shadcn/ui gallery modelled on a photographer's contact sheet. A heading and short description sit above a bordered sheet of twelve square thumbnails, each labelled with a film frame number such as 07A, and a large portrait viewer to its right, shown above the sheet on small screens.

Selecting a frame draws a hand-drawn red circle around it, the way an editor marks picks with a grease pencil, and crossfades the viewer to that photo. The caption under the viewer shows the title, frame number and location, with outline previous and next buttons. The sheet behaves as a listbox, so arrow keys move left, right, up and down through the frames.

The feel is analogue and editorial, with neutral surfaces letting the photos carry the colour and the red mark as the single accent. It suits photographers, agencies and archives presenting a shoot or a series. It needs a photo, a title and a location for each frame.