shadcn.io is not affiliated with official shadcn/ui
Webhook Triggers Comments Block for React
Three comment event endpoints with a switch each over a delivery log filtered by All, Succeeded or Failed, where a delivery opens to its JSON body and a failed one can be retried.
Installation
Overview
Send comment events to other systems and check what went out, with this webhook panel for React with Base UI. A compact header holds the one primary, a Shine Button that adds a test event. The frame has two bands. The first lists three endpoints: a name, its host in monospace, the events it listens for as outline Badges and a Switch. The second is the delivery log, a held scroll region with a Toggle Group for All, Succeeded and Failed, each with its count. Every delivery shows the endpoint, the event, the time, how long it took and the status in words; a Collapsible opens it to the request body, drawn with the catalog JSON Tree View. A failed delivery has a Retry button that turns it into "200 OK on retry, in this demo". Hosts are made-up example addresses and nothing is called. It is built from Switch, Toggle Group, Collapsible, JSON Tree View, Shine Button, Button, Badge and Guides, with a CSS entrance only. For developer settings, automation hooks and any product that tells other tools about comments.
FAQ
How do I use my own endpoints and events?
Edit ENDPOINTS (an id, a name, a host and the events it listens for) and START_LOG (each delivery's endpoint, event, time, status code and duration). The body shown for a delivery is built by payloadOf from the delivery's own fields; change that function to match your payload. Event names such as comment.created are examples.
What does Retry do?
It changes the row to a success and says "200 OK on retry, in this demo. Nothing was called." Focus returns to the row so you can keep reading, and if you are looking at the Failed filter the region takes focus because the row leaves that list. In a real product, Retry sends the same body to the endpoint again from your server, with the same event id so the receiver can ignore duplicates.
What does Send test event do?
It adds a successful delivery at the top of the log for the first endpoint that is switched on, up to six times. If every endpoint is off it says so and adds nothing. No request leaves the page.
Should I sign the requests?
Yes. A real endpoint should receive a signature header computed from the body and a secret, and refuse requests whose signature or timestamp does not match. This block draws no secrets; add a signing secret field to the endpoint rows when you wire it up, and show it once.
What stays local?
The switches, the log, the filter and the test events. To make it real, store endpoints per workspace, queue each delivery with retries and backoff, record the status and duration, and load the log from the server. You can point the same events at an automation tool by using its inbound webhook URL as the host.