## Webhook Event Log (S—160)

A webhook delivery log: status codes as compact pills, rows expand to show the payload, failed rows can be retried.

- URL: https://sundaeui.dev/components/event-log
- Category: Cards & data visualization · Art direction: Refined
- Access: Free (no account needed)
- Stack: React 18+, TypeScript, plain CSS; dependencies: none
- Install: `npx shadcn@latest add https://sundaeui.dev/r/event-log.json`
- Tags: status-codes, events, log, developer, webhooks, retry

Each row shows event type, status code and time. Expanding a row reveals the JSON payload and response time; failed deliveries offer Retry, which shows a pending state then the new result.
A filter toggles between all, succeeded and failed deliveries.

### Usage

```tsx
import { EventLog } from '@/components/sundae/event-log'

<EventLog />
```

### Props

- `events` (`{ id: string; type: string; status: number; at: string; ms: number; payload: object }[]`, required): Deliveries.
- `onRetry` (`(id: string) => Promise<number>`): Redeliver; resolves with the new status.
- `fill` (`'dark' | 'light'`, default `'dark'`): Surface: dark or light.

### When to use

- Developer dashboards, integrations, API platforms.

### When not to use

- Large volumes: use a paginated data table with search.

### Accessibility

- Rows are disclosure buttons; status is spoken as “200 OK” rather than a colour.
- Retry results are announced.
- Reduced motion removes the movement and keeps every state change.