shadcn.io is not affiliated with official shadcn/ui
Photo Grid Gallery Reviews Block for React
Nine drawn owner pictures of a cutting board in a three-column grid of mixed shapes; each opens a dialog with the picture large beside its review, and the arrow keys step through all nine.
Installation
Overview
A photo grid for React with Base UI, for the Sprucemill board, a fictional wooden cutting board. A header with the title, one sentence and a "9 pictures" badge sits over nine framed tiles in two columns on a phone and three from the large breakpoint, each a drawn picture of its own shape (a loaf of bread, end grain up close, the board on a hook, a knife with tomato slices, a juice groove, two sizes, herbs, oil and cheese) with a caption and a mark on each corner of its frame. Every tile is a button that opens one dialog: the picture large and uncropped at its own ratio beside the review it came with (stars with their value in words, a title, the text, the reviewer with an initials avatar, a "Verified purchase" mark in words and a fixed date), a "Picture 4 of 9" counter, Previous and Next buttons that wrap around, and the arrow keys with Home and End. A swipe on touch steps too, Escape closes, and focus returns to the tile of the picture last shown. The dialog is full screen on a phone. The pictures are drawn greyscale scenes, never photographs. It's built from Dialog, Badge, Rating, Avatar, Button and Guides.
FAQ
How do I use real photographs?
Each picture is typed data (a scene, a ratio, a title, a description) that Scene draws; a comment above Scene says what to swap. Replace its use in the tile and the viewer with <img alt="" className="size-full object-cover" src={picture.src} />, add src to PICTURES, and keep the ratio of each photograph so the tiles and the viewer keep their shapes. The description is the viewer's alt text and is read beside the caption.
How do I step through the pictures?
With the dialog open, Left and Right (swapped in a right-to-left page) go to the previous and next picture, Home and End jump to the first and last, and the Previous and Next buttons wrap around. A polite line reads "Oiling day, picture 8 of 9". Closing the dialog, by Escape or the close button, puts focus on the tile of the picture you last saw, not the one you opened.
Why do the tiles have corner marks?
Each tile has its own frame: a hairline rectangle that overshoots its corners by half a rem, with a mark on each, in the page's rule style. The tiles flow in CSS columns, so each column keeps the shapes of its pictures, and the gap between columns leaves room for the overshoot. Reading order is down each column.
Related
- Pro
Media Carousel Reviews
Owner photosSix drawn owner pictures of a planter set in a carousel with a filter and a counted label for each group; pressing a picture shows its review in a band beneath.
- Pro
Photo Wall Reviews
Owner photosA bento wall of drawn owner pictures of linen bedding with a filter for its three finishes and a summary tile that works out the finish's average rating; a tile reveals who took it on hover and focus.
- Pro
Lightbox Gallery
Stage and thumbnailsNine pictures of a photography studio's year on shared hairlines, a featured frame and a caption under each, where every frame opens one viewer dialog with the whole picture, its credit, Previous and Next, a counter, arrow keys and a swipe.
- Pro
Snippet Cards Reviews
Cards and wallsEight review snippet cards on shared hairlines for a yoga mat: each leads with its most helpful sentence, and a Sheet opens the whole review with Previous and Next buttons and a polite counter.
- Pro
Masonry Layout Reviews
Cards and wallsTwelve reviews of pruning shears as cards of every length in CSS columns, with a star filter, an order switch, a polite count and a Helpful vote on each card.
- Pro
Featured Carousel Reviews
Cards and wallsA framed carousel of five editor's picks for a desk chair, each chosen by a rule worked out from ten typed reviews: most helpful, most detailed, best critical, newest verified and longest owned.