shadcn.io is not affiliated with official shadcn/ui
Card Stack Gallery Block for React
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 Base UI, 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.
Related
- Pro
Coverflow Gallery
Carousels and slidesEight drawn album sleeves in a framed stage with the middle one full size and square and its neighbours turned away and dimmed, moved by buttons, arrow keys or a click, with the title band that closes the frame.
- Pro
3D Prism Carousel Gallery
Carousels and slidesOne stacking chair drawn from four sides on the faces of a block that turns a quarter at a time in CSS 3D, with a View control for front, side, back and top, flat under reduced motion.
- 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
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
Layered Deck Shuffle Features
Carousels and mediaA stack of six flashcards with one large front card and three peek cards above it at shrinking scale; Next card sends the front card to the back and clicking a peek brings it forward, beside three features.
- Pro
Swipe Deck Features
Carousels and mediaA features section as a triage deck of feature requests: drag the top card past a threshold to keep it or skip it, or use the Keep and Skip buttons and the arrow keys, with a tally and a Start over button.