shadcn.io is not affiliated with official shadcn/ui
True Scale Artwork Gallery Block for React
A gallery wall at true scale: six framed works as wide and tall as their stated sizes, a Show scale switch that hangs a 170 cm figure beside them, and a wall label on hover and focus.
Installation
Overview
An art gallery for React with Base UI. Six framed works hang on one eye-level line of a wall of fixed size, each as wide and as tall as its stated size in centimetres, so a 40 by 50 cm drawing is small beside a 150 by 100 cm canvas. A "Show scale" switch draws a 170 cm figure at the end of the wall and writes each frame's size under it. Pointing at or focusing a frame opens its wall label: title, artist, year, medium and size. On a phone the wall becomes a grid two across, with the label under every frame, and there is no figure. The wall is a tinted band that ends the block, with its marks at the top. The works are drawn compositions in the theme's greys, never photographs. It's built from Guides, Switch and Hover Card, with CSS transitions for the entrance. For galleries, auction previews, studios and any place where size matters.
FAQ
How is the scale kept true?
The wall is typed in centimetres (WALL_HEIGHT, the eye line, the gaps) and every frame's width and height too. Each frame's position, width and height are percentages of the wall worked out from those numbers, and the wall keeps its aspect ratio, so the proportions are exact at any width.
What does Show scale do?
It makes the 170 cm figure and each frame's dimension line visible. They are always in the page but hidden, so the wall never moves; switch it off and they go. A polite line says which state it is in.
Does the wall label work without a mouse?
Yes: it opens on focus as well as on hover, and each frame is a button named with its title, artist, year and size. On a touch screen, the label under each frame on a phone gives the same facts.
How do I add a work?
Add an entry to WORKS with its size in centimetres and a scene for the picture, and the wall's width grows to fit it: the positions are computed in order. With photographs, replace Scene with an <img> in the frame.
Related
- Pro
Caption Density Gallery
Rows and bandsA photo essay of five framed pictures in alternating rows, with a Short and Full switch: Short shows each title, Full adds the place, date, credit and a two-sentence story.
- 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
Bring-to-Front Collage Gallery
Walls and tablesSix drawn scraps overlap at slight angles on a dot field in a framed figure: choose one to bring it to the front and straighten it, press Escape to put it back, and Shuffle through three arrangements.
- Pro
Mood Board Gallery
Walls and tablesA pinboard of twelve pieces of five kinds (pictures, paint chips, materials, words and type) pinned a degree off square, with a lens that dims the other kinds without moving anything.
- Pro
Product Showcase Gallery
Stage and thumbnailsA product viewer for a running shoe: a vertical rail of four angles beside a 4:3 stage, three finishes that recolour every picture, and price, sizes and stock with an Add to bag button.
- Pro
Tabbed Plaque Shelf Awards About
Press and recognitionA recognition shelf for a grant platform in two tabs: six plaques with a drawn laurel, the prize, who gave it and the year won, or six certifications with a stamped ring and when each renews.