Endpoints with health, a delivery histogram, recent deliveries with Retry, and an open delivery with its payload.
FreeWeb and MobileMotion
Preview
npx shadcn add @fetaui/webhooksPlayground
Webhooks
Every event is signed and posted to your endpoints. Failed deliveries retry for three days, or you can retry them now.
3 endpoints · 1 with failed deliveries
Ledger sync
Added by Emma Collins on Mar 4, 2026whsec_••••7f3a
297 events3 failed
Recent deliveries
Delivery open
Webhooks
Every event is signed and posted to your endpoints. Failed deliveries retry for three days, or you can retry them now.
3 endpoints · 1 with failed deliveries
Ledger sync
Added by Emma Collins on Mar 4, 2026whsec_••••7f3a
297 events3 failed
Recent deliveries
invoice.payment_failedevt_GAYU3UijOD, attempt 1Response500Internal server error in 2,318 ms
{
"id": "evt_GAYU3UijOD",
"type": "invoice.payment_failed",
"api_version": "2026-08-01",
"livemode": true
}Icons animation
Fail next action
Motion
Installation
Terminal· bash
npx shadcn add @fetaui/webhooks
Accessibility
- The histogram is one image with a text description.
- Rows show expanded state with aria-expanded.
- Status codes are text with a mark.
Motion
- The open delivery fades and rises 8 px over 240 ms.
- The panel fades in and rises 8 px over 400 ms, once.
- Rows fade in over 240 ms with a 40 ms stagger.
- Numbers and bars tween over 240 ms by writing text and transforms, so React does not render per frame.
- With reduced motion, the panel appears in place and values swap at once.
Responsive behavior
- 760 wide on Web and 358 on Mobile, filling narrower parents.
- Collapses by its own width with a container query, so it adapts in a sidebar too.
- Touch targets stay at 44 on Mobile.
Performance
- The open delivery mounts only while open and leaves through AnimatePresence.
- Histogram bars scale on a transform, with one element per entry in hours.
Note for AI
Give your coding assistant the Markdown reference instead of screenshots.
- Import Webhooks from @/components/fetaui/webhooks. It composes Button with Panel, Body, Tag and Initials from data-kit.
- Retry waits for onRetry. Resolve with the new status code, or with nothing for 200. A rejection keeps the failure and shows failedMessage.
- detail is one object. onEndpointChange fires with the selected id, so pass that endpoint's detail. defaultEndpoint picks the first selection.
- detail.secret is printed as given, so pass a masked value. The subtitle's three day retry window is fixed text. The demo has no backend.
Related
Webhook TesterProBlockSend a signed test event, check the JSON, and follow signed, sent and response steps.Request LogComponentOne request in mono, and a windowed list for live tails of any length.EndpointComponentA method Badge in a fixed column, a mono path and a one line summary.API KeyComponentA key on a well with reveal and copy. Copied confirms for 2 s and Revoked removes the actions.