Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Notification blocks

Pro

Webhook Received Notification Block for React

One incoming webhook in a split frame: its source, event, delivery id and times in a data list, the payload as an expandable JSON tree with a Copy, and a Replay delivery that counts deliveries on the page.

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

Let a developer see exactly what arrived and send it again, with this webhook notification for React with Base UI. It is Hookrelay, a webhook inspector, in a hairline frame with a plus mark on each corner, split in two. At the start a Data List of the delivery: who sent it, the event, the delivery id in mono, when it was received and how many times it has been delivered, then Replay delivery, the one Shine Button. At the end the payload as an expandable JSON Tree View in a window of fixed height, with a Copy Button for the whole body. Replay counts a delivery and says "Delivered 2 times, in this demo." On a phone the two cells stack. Guides draw the frame and the divider. For webhook consoles, API dashboards and any event that arrives with a body.

FAQ

How do I show my own webhook?

Edit BODY (the payload as an object), SOURCE, EVENT, DELIVERY and RECEIVED. The tree reads the object as it is, expands two levels and hides array lengths; the Copy puts the same object on the clipboard as indented JSON. In your app pass the body you stored for the delivery.

What does Replay delivery do?

It counts: each press adds a delivery on this page, writes "Delivered 2 times, in this demo" with the time of the last one, and nothing is sent to any URL. After four replays it stops and says that is the most the demo does. A reload starts again at one. In your app call your replay endpoint from replay and add the new attempt it returns.

Where do the replay times come from?

From the typed REPLAYS list, in order, so the page reads the same for everyone and never reads a clock. The first delivery is RECEIVED.

Does it check a signature?

No. The delivery is typed example data and nothing is verified or stored. Check the signature of a real webhook on your server before you trust its body, and show the result next to the facts.

Is it accessible?

The facts are a description list, the tree can be operated from the keyboard, its window holds a fixed height so expanding a branch never moves the page, and Copy and Replay have visible names. Replay stays focusable when it has stopped and explains why.

  • Pro

    Failed API Request Notification

    Incidents and alerts

    One failed request from an API gateway: a 502 with the endpoint, upstream, time and request id (with a Copy), tabs for the request, the response and the headers in numbered code windows, and a bounded simulated Retry.

  • Pro

    Failed Webhook Delivery Error

    Developer tools

    A full-screen page for a webhook the endpoint rejected: the latest attempt's facts, four expectation checks with a shape and a word, numbered request, response and log windows, and a simulated resend.

  • Pro

    Catch Hook Setup Integration

    Keys and code

    An integration setup section for a form tool working with Zapier: three numbered steps (a copyable Catch Hook address, a sample submission, a field check), a Finish setup Shine Button, and a framed JSON tree of the sample, shown first on wide screens.

  • Pro

    API Error Dialog

    Status and errors

    A deploy platform's overview with its failed card and the error alert shown open: the 502 status, the code and request id, a retry ladder of three attempts, a real copy of the error report and the error body as a JSON tree.

  • Pro

    Project Activity Feed Notification

    A project's history as a vertical timeline split in two: six event types as chips with live counts in a start column, and the timeline of who did what beside them, filtered by the types you press, with Load earlier events and a designed empty state.

  • Pro

    Achievement Notification

    A medal shelf for a learning platform after a learner finishes a first project: eight drawn medals in a hairline grid with a New badge on the latest, and a popover on each medal with its criteria, a progress bar and the day it was earned.

All 100 notification blocks