Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Carousel blocks

Pro

Webhook Events Carousel Block for React Aria

Fourteen webhook deliveries in a vertical track that moves five rows a page under a fixed column head, with derived delivered, failed, pending and retried counts and a Retry that turns a failed row into Retried in place.

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

Page through a delivery log without a table that grows, with this webhook events carousel for React with React Aria. Hooklog, a webhook inspector, lists fourteen deliveries in a vertical track that shows five rows and moves five at a time, a page of rows, under a column head that stays put. A toolbar band states the counts ("9 delivered, 3 failed, 2 pending"), derived from the events. A row is the event type, the endpoint in mono, a status as a glyph and a word (Delivered, Failed, Pending), the HTTP code and a fixed UTC time. A failed row has a ghost Retry Button that turns the row into "Retried" in the same place and moves the counts; nothing is sent. Up and Down buttons and the arrow keys move a page, and the foot says which events are in view and what the last retry did. On a phone the code and time fold into the first cell. The ruled bands come from Guides. It is built from Carousel, Button and Guides, with CSS transitions only. The events are made up.

FAQ

How do I use my own events?

Edit EVENTS. Each has an id, a type, an endpoint, a status (Delivered, Failed or Pending), an HTTP code and a time. The counts are derived, and AS_OF is the day the times belong to. Load the real log from your webhook service and keep the endpoint in the mono cell.

What does a page of rows mean?

The track moves five rows at a time, so each press shows a new set of five, and the last page shows the final five (rows 10 to 14). Embla runs on the y axis with slidesToScroll 5, and the last page stops at the end of the list.

What does Retry do?

It marks that row "Retried" and moves the counts ("2 failed, 1 retried"), then the foot says "Retried invoice.payment_failed, in this demo. Nothing was sent." The button leaves the row's layout reserved so nothing shifts.

How does it work with a keyboard?

Tab reaches Retry on the failed rows in view, then Up and Down. With focus inside the track the arrow keys move a page and Home and End jump to the ends. Rows out of view are hidden from the tab order and from screen readers.

What stays local in the demo?

Everything. Retry only changes this page's state, nothing is sent, and the events are made up. To wire it for real, call your redelivery endpoint from the Retry handler, then refresh the row's status and the counts from the response.

How does it look on a phone?

The track keeps its height and five rows show. The HTTP code and time sit under the endpoint in the first cell, the status and Retry stay at the end of the row, and the column head is hidden.

All 100 carousel blocks