shadcn.io is not affiliated with official shadcn/ui
Bring-to-Front Collage Gallery Block for React
Six 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.
Installation
Overview
A collage for React with Base UI. Six drawn scraps (a mountain print, two posters, a type specimen, a plant and a scanned page) overlap on a faint dot field inside a framed figure, each a degree or two off square. Each scrap is a toggle button: click, Enter or Space brings it to the front and straightens it, and Escape puts it back. A Shuffle ghost button cycles three fixed arrangements (Pile, Fan, Row), and the scraps slide to their new places. The reading order is the list's, whatever lies on top, and a polite line names the scrap in front. The copy comes first in the markup and the collage sits at its start from lg; on a phone the scraps turn half as far. The scraps are drawn in the theme's greys, never photographed. It's built from Guides and Button. For mood boards, moodboards and any set that should feel handled.
FAQ
How does bring-to-front work?
Every scrap has a place in each arrangement (position, width, angle, stack order) as CSS variables. The one in front gets the highest stack order and aria-pressed, and a transition straightens and enlarges it slightly. Nothing is reordered in the DOM.
Which keys work?
Tab visits the scraps in list order. Enter or Space brings the focused scrap to the front or puts it back, and Escape puts it back. Shuffle is a normal button.
What does Shuffle do?
It moves to the next of three fixed arrangements and puts any raised scrap back. The scraps animate between places with a CSS transition on inset-inline-start, top, rotate and scale; under reduced motion they jump.
How do I use my own photographs?
The drawn pictures are one Scene component. Where the code comment says so, replace it with an <img> (object-cover in a box of the picture's own ratio) and give each entry a src. Keep each entry's ratio the photograph's own so the layout doesn't change.
Related
- Pro
Card Stack Gallery
Walls and tablesA pile of five drawn risograph prints on a framed table top: send the top one to the back, or spread the pile into a row and gather it again, with a list that says the order.
- Pro
Instant Print Gallery
Walls and tablesSix drawn instant prints lying a degree off square on a faint table band, each faded and blurred until you hover, focus or tap it, with a button that develops the whole tray one print after another.
- 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
Sortable Masonry Gallery
Masonry and mosaicA masonry wall of twelve drawn pictures of mixed ratio in CSS columns, framed with + marks on its corners, with an Order control (Newest or Oldest) that re-sorts them.
- Pro
Density Photo Wall Gallery
Hairline gridsTwenty-four small drawn pictures on shared hairlines whose columns follow a Density slider, each offering one action, Copy link, that confirms in place.
- Pro
Shop the Look Lookbook Gallery
Annotated picturesA drawn styled room with four numbered pins that open popovers with the item, its price and a link, beside the same four items as a real list, with two looks to choose from.