shadcn.io is not affiliated with official shadcn/ui
Photo Wall Reviews Block for Svelte
A 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.
Installation
Overview
A photo wall for Svelte with Ark UI, for Teaselford linen bedding, a fictional range in three finishes. A centred header with the title and one sentence sits over a bento of tiles on shared hairlines that run rail to rail: one large square, four small squares, a wide tile, and a summary tile. The summary holds a Toggle Group of the three finishes (Flax, Oat and Slate), the finish's average rating as a figure and as half stars, and a polite line that says how many reviews stand behind its six pictures. Choosing a finish swaps the six drawn pictures (a folded stack, the corner of a made bed, the weave up close, a hem, a duvet and pillows, a cushion on the sofa) in the same places, so the wall never moves. A tile reveals who took the picture and the rating they gave on hover, on keyboard focus, and when pressed; a press holds it open. The pictures are drawn greyscale scenes, never photographs, and Flax is drawn palest and Slate darkest. On a phone the wall is two columns and the summary comes first. It's built from Toggle Group, Rating and Guides.
FAQ
How do I use my own finishes and photographs?
Edit FINISHES: each finish has a label and six photos made by photosOf(finish, names, ratings), which gives each place in the wall its drawn scene, reviewer name and rating. The average and the count on the summary tile are worked out from those ratings with whole-number maths. To use real photographs, give each photo a src and replace <Scene ... /> inside Tile with <img alt="" className="size-full object-cover" src={photo.src} />; keep the square and wide shapes of the places so the wall lines up.
How does a tile reveal its reviewer?
Each tile is a button. The reviewer's name and rating sit in a bar at the foot of the picture, hidden by a clip rather than by opacity so the text always stays in the page for a screen reader. Hovering, focusing the tile with the keyboard, or pressing it opens the bar; pressing again closes it, and choosing another finish closes every bar. On touch screens the bars show by default.
What does choosing a finish change?
The six pictures, the average rating and the sentence on the summary tile. Every finish has the same six places, so the wall's shape and height stay the same. The summary line is a polite status, so a screen reader hears "Oat: 6 reviews, one behind each picture" after you change.