Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Dashboard blocks

Pro

Webhook Deliveries Dashboard Block for Ark UI

A log of eight webhook deliveries with the request and response as JSON trees, the attempts with their retry waits, and a Resend that turns a failed delivery into a delivered one.

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

Read what you sent and what came back with this delivery log for React with Ark UI. A hairline frame with a plus mark on each corner puts eight Hookbench deliveries in a list at the start, each with its event in mono, the endpoint host, the status code with its word and the round trip in milliseconds. Beside it, the chosen delivery opens in Tabs: Request shows the payload as a JSON Tree View with a Copy Button, Response shows what the endpoint answered, and Attempts lists every try with the wait before the next. A delivery that failed offers Resend in the foot; pressing it adds a 200 attempt and flips the row to Delivered, and the count in the header follows. It's built from Tabs, JSON Tree View, Badge, Shine Button and Guides. For developer consoles and webhook support tools.

FAQ

How do I fill it with my deliveries?

Edit DELIVERIES: the event, the host and path, the code and round trip, the object id and amount that fill the request body, and an attempts list with each try's time, code and retry wait. The request is built from those fields and the response from the status code, so neither is typed twice.

What does Resend do?

On a failed delivery it adds a 200 attempt, turns the row and the badge to Delivered and raises the delivered count. On one that already arrived it answers that there is nothing to resend. Nothing is sent: the demo says so in the status line.

Why are status codes shown as words?

A colour alone cannot carry a status, so each code is printed with its word (Delivered, Rate limited, Server error, Timed out) in the list and in the detail.

What stays local, and how do I wire it for real?

The deliveries, payloads and the resent state live in the page, and Copy writes the payload to your clipboard. To wire it up, load a page of deliveries from your event store and call your resend endpoint from resend, then replace the attempt list with the response.

How do I use it with a keyboard?

Tab through the list, press a delivery to open it, then use the arrow keys on the tabs. Focus does not move when you pick a delivery. The Attempts list is a scroll region you can reach with Tab.

How does it look on a phone?

The list stacks above the detail and drops the milliseconds; the tabs keep their height so the foot does not jump when you switch.

All 200 dashboard blocks