shadcn.io is not affiliated with official shadcn/ui
Layered Deck Shuffle Features Block for React
A 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.
Installation
Overview
A layered deck shuffle features section for React with Base UI. A reverse split: on the start side a deck of six flashcards from a flashcard tool, one large card in front (the term, its meaning and a split preview of the prompt and the answer) and three peek cards above it at shrinking scale, each showing only its title strip; on the end side of a divider, a compact heading and three features. "Next card" sends the front card to the back and moves every other card up a place, and clicking a peek brings that card to the front. It's built from Button and Guides, with a position attribute and CSS transitions and your theme's tokens for every colour. For flashcards, onboarding and any stack of things you page through while seeing what is next.
FAQ
How do the cards move?
Each card's place is its distance from the front card, going round (data-pos 0 is the front, 1 to 3 are the peeks, the rest wait out of sight). A table of class strings gives each place its translation, scale and opacity, and a CSS transition on transform and opacity moves the card when the front changes. "Next card" moves the front one on, so the old front becomes the last place and fades behind the others.
How do I change the cards?
Edit CARDS: each has a title, a sentence and the prompt and answer of the split preview. The peek count is three because POSE has four visible places; show more peeks by adding poses and widening the space above the deck.
What is exposed to a keyboard and a screen reader?
Only the front card's content is in the reading order. Each peek has a button over it named "Bring Ribosome to the front", in the tab order, and the cards out of sight have none. Next card is a real button, and a polite status line reads out the new front card and its sentence after each change.
Is anything different between the targets?
No. The deck is plain buttons and state on every target; only the Next card button differs in how it handles a press.
Related
- Pro
Fanned Card Deck Features
Carousels and mediaFive playbook cards stacked and pivoting from their bottom edge that spread on an arc on hover, on focus inside the deck or when a Fan out toggle is pressed, each with a small drawing of its play.
- Pro
Index Card File Rolodex Features
Carousels and mediaA wallet-style stack of five studio contact cards built on a single-open Accordion: the cards overlap so only each title strip shows, and opening one slides it forward and reveals its details.
- Pro
Depth Layered Stack Features
Diagrams and mapsAn exploded isometric stack of three greyscale planes (data, logic, view) in CSS 3D, with a ruled list of the layers beside it: hovering, focusing or tapping a layer lifts its plane and outlines it.
- Pro
Centered Stacked Cards Deck Hero
Product windowsA centred showcase hero for a reporting workspace: the headline and a Shine Button, then a band between the rails with a fanned deck of three app windows (Dashboard, Analytics, Reports) that runs off its foot, masked.
- 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.
- Pro
3D Ring Carousel Features
Carousels and mediaSix capability cards on a true 3D ring in a framed stage, turned a card at a time by the previous and next buttons or the arrow keys, with the far cards dimming behind the front one.