shadcn.io is not affiliated with official shadcn/ui
Card Stack Gallery Block for React Aria
A 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.
Installation
Overview
A pile of prints for React with React Aria, for Printroom, a risograph print studio. Five prints lie on a framed table top, each a degree or two off square, the top one in front. "Next print" sends the top one to the back, and "Spread", a toggle, fans the pile out into a row; pressing it again gathers the prints back, in the order they ended in. A list under the table says the order, top first, with each print's title and size, because the prints are small once spread. On a phone the pile sits above the buttons and the spread wraps to two rows. The prints are drawn in CSS, not photographed: a type poster, stripes, a halftone, a weave and arches, in your theme's own colours. It's built from Toggle, Button and Guides, with CSS transforms and your theme's tokens for every colour. The studio and its prints are made up for the example.
FAQ
How do I use my own prints?
Each print in PRINTS has a title, a size line, a paper fill and a kind of art. Replace Art in the print with <img alt="" className="size-full object-cover" src={…} />. The paper is the print's border; its shape is 3 wide for 4 high.
How are the places worked out?
The block keeps the prints' ids in order, top first, and a flag for the spread. Each print's place is read from its position in that order: the pile (small offsets and angles, top first) or the spread (a row, or two rows on a narrow stage), as CSS variables. A transition on the transform moves it, so sending the top print to the back slides it under the others.
How does it work with a keyboard?
Tab reaches Next print and Spread; Enter or Space presses them. The prints are pictures, not controls, so nothing in the pile takes focus. A polite status line says "Pile: Field Lines on top, 1 of 5" or "Spread: 5 prints in a row". The toggle keeps one label and reports its state with aria-pressed.
How does it fit on a phone?
The stage is a container: below 28rem the spread uses two rows, three over two, and above it the row. The pile is the same everywhere. The order list is two columns from sm.