# Webhooks

Endpoints with health, a delivery histogram, recent deliveries with Retry, and an open delivery with its payload.

Tier: Free

## Installation

```bash
npx shadcn add @fetaui/webhooks
```

## Usage

```tsx
import { Webhooks } from '@/components/fetaui/webhooks'

export function Example(props) {
  return <Webhooks endpoints={props.endpoints} detail={props.detail} deliveries={props.deliveries} />
}
```

## API

| Prop | Type | Default |
|---|---|---|
| endpoints | WebhookEndpoint[] | required |
| detail | WebhookDetail | required |
| deliveries | WebhookDelivery[] | required |
| defaultOpen | string |  |
| onAdd | () => void |  |
| onRetry | (id) => void |  |
| animated | boolean | true |

## When to use

- As the webhooks page of a developer settings area.

## When not to use

- For sending a test event: use Webhook Tester.

## 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.