## Webhook Endpoints (S—327)

Manage webhook endpoints: recent delivery dots per endpoint, send a test ping, reveal the signing secret, disable.

- URL: https://sundaeui.dev/components/webhook-list
- Category: UI components · 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/webhook-list.json`
- Tags: api, integrations, deliveries, endpoints, developer, webhooks

Each endpoint shows its URL, subscribed events and the last ten deliveries as a row of dots, filled for success and hollow for failure.
Send test runs a ping through your handler and adds the result to the dots. The signing secret stays masked until revealed.

### Usage

```tsx
import { WebhookList } from '@/components/sundae/webhook-list'

<WebhookList />
```

### Props

- `endpoints` (`{ id: string; url: string; events: string[]; on: boolean; history: boolean[] }[]`, required): Endpoints.
- `ping` (`(id: string) => Promise<boolean>`): Test delivery.
- `fill` (`'dark' | 'light'`, default `'dark'`): Surface: dark or light.

### When to use

- Developer dashboards, integration settings.

### When not to use

- Full delivery logs: link to a log view.

### Accessibility

- Delivery history is summarised as text ("8 of 10 succeeded").
- Enable switches and actions are labelled with the URL.
- Reduced motion removes the movement and keeps every state change.