fetaUI
GitHub

Webhooks

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/webhooks
Playground

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 1

Response500Internal 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