shadcn.io is not affiliated with official shadcn/ui
Stacked Cards Stepper Block for React
A children's maths lesson as a deck of four cards with the next two peeking behind, where Next sends the top card away and a drawn certificate counts the answers.
Installation
Overview
Give each step the weight of a card, with this stacked-cards stepper for React with Base UI. A plus-marked frame holds a small Steps row of four numbers (Warm up, Practice, Quiz and Certificate) and, under it, a deck: the open card on top, the next two showing their edges behind it. Next sends the top card up and fades it while the next one comes forward, and Back brings it back. Warm up is a counting pattern, Practice has three sums to type into Input fields, Quiz is a single question in a Radio Group, and the last card is a certificate drawn in plain lines that says how many sums were correct. "Start practice" and its siblings are the block's one Shine Button. Cards behind the top one are inert, so only the open card is reachable. For lessons, quizzes, walkthroughs and any short flow where one thing at a time is the point.
FAQ
How do I change the cards and sums?
Edit CARDS for the row of names, SUMS for each prompt and its answer, and CHOICES with QUIZ_ANSWER for the quiz. The certificate counts the correct sums and reads the quiz from the same lists. Each card is written out in the JSX, so a new kind of card is a new article with its own placeOf position.
How is the deck drawn?
All cards share one grid cell. placeOf gives each a position from its distance to the open card: on top, a little lower and smaller one or two places behind, or hidden once it is further away or already gone. It is plain CSS transitions on opacity, translate and scale, and under reduced motion the cards swap without moving.
What stays local?
The typed answers, the quiz choice and the current card are component state and are lost on reload; nothing is marked by a teacher or sent anywhere. To keep the score, post typed and pick from advance when the certificate opens.
How does the keyboard work?
Only the open card can be reached: the others are inert. Tab goes through its fields and then to Back and the button, and after each move the card's heading takes focus and a polite line says "Card 2 of 4: Practice". The numbers at the top show where you are and are not buttons.