Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Notification blocks

Pro

Stacked Notification Cards Block for React

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.

Framework
UI library

Preview

Preview width

Installation

Part of Pro
Pro unlocks the code and one-line install of every Pro button and text effect, plus the MCP for your AI editor.
Get ProSign in
Have Pro already? Sign in to open it.Opens here as soon as you're Pro.

Overview

Keep several notifications to one card at a time, with this stacked deck for React with Base 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.

How is the count worked out?

From the cards still on the deck, never typed: the badge, the "Show all 3" label and the status line all read it. With one card or none remaining, Show all stays on screen but answers that there is nothing to fan out.

How does it look on a phone?

The deck is as wide as the panel and as tall as the fanned list, so the cards keep their size and the title and description wrap within them, each cut to two lines. On a touch screen the button fans it and Dismiss works on whichever card is in front.

  • Pro

    Floating Notification Card

    Floating cards

    A visitor's message floating on a pricing page: a toggle group parks the card in any of four corners, Reply swaps its buttons for a one-line field, and Dismiss and Show again replay the slide-in.

  • Pro

    Slide-In Notification Panel

    Bells and panels

    A notifications panel that slides in from the end of a sales pipeline's page, open on load: a bell that toggles it, five rows that mark themselves read, and Clear all with an exact Undo.

  • Pro

    Grouped Accordion Notification

    Sort and find

    Notifications grouped into Messages, Updates and Alerts in an accordion, each group with an unread count, its own mark read beside the trigger, a one-line summary when folded, and collapse and clear for the whole list.

  • Pro

    Pin Limit List Notification

    Sort and find

    Notifications split into Pinned and Recent with a pin on every row and a limit of three: the pinned ones stay on top in the order you pinned them, and at three the other pins say to unpin one first.

  • Pro

    Real-Time Notification Feed

    Live and empty states

    A live status feed that doesn't jump: a typed script of six events starts when you press Start, new ones wait in a pill above the list, and pressing the pill lets them in at the top.

  • Pro

    Tabbed Inbox Notification

    Bells and panels

    A notification centre as a narrow panel: tabs for All, Mentions and Alerts with their own unread counts, rows you press to mark read, a mark all read for the open tab and a clear with an undo.

All 100 notification blocks