shadcn.io is not affiliated with official shadcn/ui
Layered Deck Shuffle Features Block for Radix UI
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 Radix 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.