shadcn.io is not affiliated with official shadcn/ui
Density Photo Wall Gallery Block for Vue
Twenty-four small drawn pictures on shared hairlines whose columns follow a Density slider, each offering one action, Copy link, that confirms in place.
Installation
Overview
A density wall for Vue with Ark UI, for Pegwall, a shared-wall app. A start-aligned header carries a "Density" slider at its end, from 3 to 8 pictures across (two to four on a phone). Under it, twenty-four small square crops of a harbour (city roofs, facades, bridges and towers) sit on shared hairlines that run from rail to rail and end the block, in a window of fixed height that scrolls, so moving the slider never moves the page. The slider sets one CSS variable on the grid, so the whole wall re-flows at once; a short last row is topped up with empty cells so the hairlines stay whole. Each picture offers one action when you hover it, focus it or use a touch screen: "Copy link", the catalog Copy Button, which says "Copied" in place and in a polite status line for a screen reader. The pictures are drawn, not photographed, in your theme's own greys. It's built from Slider, Copy Button, Badge and Guides, with CSS transitions and your theme's tokens for every colour. The app, the wall and its links are made up for the example.
FAQ
How do I use my own pictures?
Each entry in TILES has an id, a title and a scene. Add your image's address, then replace <Scene ratio={1} scene={item.scene} /> in the tile with <img alt="" className="size-full object-cover" src={…} />; the caption and the copy button already name it. Change linkOf to build each picture's real address.
How does the density work?
The wall sits in a scrolling window of fixed height (28 rem on a phone, 32 rem from sm), so changing the density never changes the height of the block. The slider's value goes to the grid as --cols, and the grid's grid-template-columns is repeat(var(--cols), minmax(0, 1fr)). On a phone a second variable, --cols-sm, halves it (rounded, never below two), so the same slider gives two to four across. The read-out beside the label says "5 across" or, on a phone, the phone's count. Twenty-four divides evenly by 3, 4, 6 and 8; for 5 and 7 the block adds empty cells to finish the last row, so the shared hairlines never show a gap.
How does Copy link work?
It is the catalog Copy Button, which writes the link to the clipboard and shows a check. The block also swaps its label to "Copied" in the same space and says "Link to Harbour roofs copied" in a polite status line. If the browser refuses (a page not served over HTTPS), the status line says it couldn't copy. The links are examples that go nowhere.
How does it work with a keyboard?
The slider takes the arrow keys, Home and End. Each picture's Copy link button is a tab stop and appears when it has focus, as well as on hover and on touch screens. Each picture also has a caption for screen readers with its title and year.
How does it fit on a phone?
The wall is two to four pictures across in a window 28 rem tall that scrolls, the slider sits under the header text, and the button shows only its icon where a picture is narrow (it keeps its name).
Does it follow my theme?
Yes. The cells are your background colour on your border colour's hairlines and the pictures are mixed from your foreground, background and muted tokens, so the wall reads in a light theme and a dark one. The block ends on its last row of pictures with no closing line, so the next section's top rule closes it.