shadcn.io is not affiliated with official shadcn/ui
Notification Delivery History Block for Radix UI
Four alerts drawn on a 0 to 60 second axis with a lane per channel, failed attempts and retries marked, channel toggles that re-derive the fastest and slowest delivery, and a press-to-read line for each dot.
Installation
Overview
Check how fast each alert reached people on every channel, with this delivery history for React with Radix UI. It is Pagetrail, a paging service (made up). Each of four alerts is a row with a title, the time it fired and four lanes, one for the pager, chat, email and text message, on a shared 0 to 60 second axis. A solid dot marks the second a message arrived; a hollow dot with a cross is a failed attempt and a dot with a return arrow is a retry that arrived, joined to the first attempt by a hairline. A Toggle Group in the header picks which channels count (at least one stays on): the others fade out and each row says again how fast the first delivery was, while the header names the slowest channel. Pressing a dot reads it in a line below the rows. Guides draw the frame and its bands. For paging, alert routing and escalation tools.
FAQ
How do I use my own alerts?
Edit ALERTS: each has the second of the day it fired and, per channel, a list of attempts with the second after firing, whether it was accepted and a note for a failure. An empty list means the channel was not routed for that alert.
How are the speeds worked out?
The first accepted attempt of a channel is its delivery. A row's summary is the fastest delivery on the chosen channels; the header names the slowest delivery across all rows. A failure followed by a retry shows both dots.
Can I use the keyboard?
Every dot is a button and the toggles are a group, so Tab and Enter work throughout. The reading line is a polite status region and focus does not move when you press a dot.