shadcn.io is not affiliated with official shadcn/ui
Alert Banner Notification Block for React Aria
An operations console's banner bar over a sketch of its app: four notices queue by urgency and show one at a time, with Previous, Next, a link, Dismiss and Snooze all for an hour.
Installation
Overview
Show one notice at a time, most urgent first, with this alert banner for React with React Aria. It's the top of Beacondesk, an operations status console, drawn in greys inside a hairline frame with a plus mark on each corner: a banner bar across the stage over a sketch of the app header and page. Four notices are queued (a failing webhook, a nearly full disk, a maintenance window and a finished backup), but only one is on screen, ranked error, warning, info and success. Each is a catalog Alert strip with a glyph, a level word in an outline Badge, a sentence, a link and a Dismiss. Under it, Previous and Next walk the queue ("Banner 1 of 4"), Snooze all for 1 hour holds the lot until a typed time and Restore brings back what was dismissed. The bar's room is held by the tallest banner, so the app under it never moves. It's built from Alert, Badge, Button and Guides, with CSS motion only. For consoles, dashboards and any app with more notices than room.
FAQ
How is the queue ordered?
Each banner has a level (error, warning, info or success) and queueOf sorts what is not dismissed by the ORDER list at the top of the file, so an error always comes first whatever order notices arrive in. Dismissing the one on screen moves the next one up into the same place; Previous and Next walk the queue round, so after the last comes the first. The pager says where you are in words ("Banner 2 of 4"), and the same words go to the status line.
How does it tell an error from an info notice without colour?
By a glyph, a word and a weight: a circle with an exclamation mark, a triangle, an info mark and a check; the word (Error, Warning, Info, Success) in a badge; and an error title that is semibold with a bar at the banner's start. The only status colour is the error's icon. The banner is a plain note, not an alert, so it doesn't interrupt anyone; the status line says what changed after each press.
What does Snooze all do?
It hides the whole queue and puts a one-line note in the bar's place, "Banners are snoozed until 10:30 UTC", with a Show now button; the pager reads Snoozed and Previous and Next say why they wait. The time is the page's fixed "now" plus an hour, typed in the file; in your app, store the wake time and compare it with the clock when the page opens. Nothing here is stored: a reload brings every banner back.
What is left when everything is dismissed?
The same bar, quiet: "No banners. Everything has been dismissed." and a Bring them back button, so the frame never changes height. Restore in the pager does the same job one dismissed banner at a time (it brings back all of them, and says how many).
Where do the links go?
The link in each banner is a Button around an a that points to # in this demo; point each at your own page. They're Buttons with href, which React Aria renders as a link.
How does it look on a phone?
The banner's sentence takes the full width and its link and Dismiss drop to a row under it; the pager's two groups wrap onto two lines. The bar still holds the height of the tallest banner, so nothing moves when you step through them, and the drawn app below shrinks to what is left.