shadcn.io is not affiliated with official shadcn/ui
Webhook Delivery Status Block for Ark UI
A sortable table of six event types with 24-hour counts, success bars, p95 times, pending retries and signature failures, a switch for types with failures and a side cell with the last five deliveries and a 12-hour sparkline.
Installation
Overview
Find which webhook event type is slow or failing, with this delivery table for React with Ark UI. It is Ledgerhook, a billing-event consumer (made up) that takes webhooks from a payments provider; Stripe is named once in the header, and the event names are generic. A native table lists six event types for the 24 hours to 14:20 UTC: how many arrived, the success rate with a short bar, the p95 handler time, retries still pending and signature failures. The column heads are buttons that sort the table, with aria-sort on the current one, and a Switch narrows it to the types with failures while the hidden rows hold their place so the panel never changes height. Choosing a type fills the side cell with its last five deliveries and a 12-hour sparkline of its p95 time. Guides draw the frame. For billing integrations and any consumer of webhooks.
FAQ
How do I use my own event types?
Edit TYPES: each has a delivery count, how many failed, a p95 time for each of the last 12 hours, its last five deliveries and the pending and signature counts. The success rate, the header sentence and the sparkline are derived.
Is this connected to a payments provider?
No. Everything is typed example data, the event names are generic and no figure describes a real provider or account.
How does sorting work?
Press a heading to sort by it; press it again to reverse. The current column carries aria-sort and a status line says how the table is sorted. Event type sorts alphabetically; the others start with the highest first.