shadcn.io is not affiliated with official shadcn/ui
Stacked Notification Cards Block for Ark UI
Three reminders from a scheduling assistant as a deck of cards: Dismiss lets the next one come forward, Show all fans the deck into a list, and an empty deck says all caught up with a Reset.
Installation
Overview
Keep several notifications to one card at a time, with this stacked deck for React with Ark UI. It's the reminders of Layerfold, a scheduling assistant, as a narrow panel in a hairline frame with a plus mark on each corner. A heading row holds a count Badge and a "Show all 3" button; under it three cards sit one on another, each a little lower and a little smaller than the one in front, so only the top one reads. Dismissing it lets the next come forward, all in CSS transforms. "Show all" fans the deck out into a list, and resting the pointer on the deck or moving focus into it does the same until you leave; Dismiss then works on any card. When nothing remains an Empty state says "All caught up" with a Reset. The deck keeps one height whether it is closed or fanned. It's built from Button, Badge, Empty and Guides, with CSS motion only. For reminders, tips or any short list that deserves one card at a time.
FAQ
How is the deck drawn?
Every reminder is a card in one ul, all in the same box. A card's place is two CSS variables, --i (its place from the front) and --z (its layer), and two sets of classes: CLOSED lowers and shrinks each card a step per card in front of it and centres the pile, FANNED gives each its own row. Dismissed cards slide out to the start and become invisible and inert. Because the box is as tall as the fanned list, fanning never moves anything under it.
What opens the deck, and how does it close?
The "Show all" button opens it and the same button, now "Show fewer", closes it. A mouse resting on the deck, or focus inside it, opens it too and lets go when the pointer leaves or focus moves out; that is only a preview of what the button does, so the button's state is the one that stays. Touch has no resting pointer, so there the button is the way.
What stays local, and how do I make it real?
Dismissals live in the block and reset on reload (or with Reset); nothing is saved or sent. To make it real, replace REMINDERS with your list (an id, a kind that picks the icon, a title, a desc and an ISO at time), send the id from dismiss to your server, and load only the few you want in the deck: it is built for three.
Is it usable with a keyboard and a screen reader?
While the deck is closed only the front card is reachable: the cards behind are inert, and their text is hidden, so a screen reader meets one reminder at a time. Each Dismiss button names its card ("Dismiss Standup moves to 09:45"), after a dismissal focus moves to the next card's button (or to Reset when none remain), and a polite status message says how many remain. The button has aria-expanded and aria-controls. With reduced motion cards move without transitions.