shadcn.io is not affiliated with official shadcn/ui
Stacked Alert Banner Block for React Aria
Four notices from an invoicing back office in one framed list: an error, a warning, an info and a success, each with its own close button, a live count and a Dismiss all.
Installation
Overview
A stack of notices for React with React Aria, for a back office that has more than one thing to say. One framed list sits between the page's solid rails, with + marks on its corners. A header row says how many notices are left and offers Dismiss all; under it, four rows on hairlines, each with a status icon, a title, one line of detail, an underlined link and its own close button. Closing a row folds its height away with a CSS transition, and the count follows. Closing the last one folds the whole block down to its top rule. The status colour is on each icon and nowhere else, and every row also names its kind in words for screen readers, so nothing relies on colour. It's built from Guides and Button, with your theme's tokens for every colour. For dashboards, admin panels, status areas and any page where several notices wait at once.
FAQ
How do I change the notices?
Edit NOTICES at the top of the file: each entry has an id, a kind (error, warning, info or success), a title, a line, a link and an href. Keep the most urgent first. The icon and its status colour come from kind, so a new notice needs nothing else. Past five rows it stops being a banner and becomes a notification centre, which is a different block.
How is the count announced?
The count ("4 notices to review") is a polite status region that is in the page from the first paint and only changes its text, so a screen reader says the new number after each close without interrupting what it is reading. It reads "1 notice" in the singular.
Where does focus go when I close a row?
To the next row's close button, or the one before it when you closed the last row, so you can keep pressing Enter to clear the list. When the final notice goes, there is no button left to keep focus on: the block folds away, and focus moves to a short visually hidden line, "All notices dismissed.", which is read out; the next Tab carries on from there. Dismiss all does the same.
Does a closed notice stay closed after a reload?
No, on purpose: the preview always shows the four. To remember a close, store the notice's id where you keep other user state and filter NOTICES with it on the server, so the page never paints a notice and then removes it.
What moves, and what happens with reduced motion?
The list fades up once when the page loads, and a closed row shrinks from its full height to nothing while it fades, in 300 ms, both with CSS only. With reduced motion turned on nothing animates: rows close at once.
How does it fit on a phone?
Below md each row is the icon, the title and the close button on one line, with the detail clamped to two lines and the link under it; from md it is one row, the detail clamped to one line and the link and the close button at the end. At 320 pixels nothing scrolls sideways, and in a right-to-left layout the rows, the arrows and the close buttons mirror.