# Webhook logs

> Webhook deliveries with payload and response inspection, failure filter and retry.

Block · Pro · https://lodeui.com/blocks/webhook-logs

## When to use

- Developer settings for products that send webhooks.

## When not to use

- Incoming request logs.

## Installation

```bash
npx shadcn@latest add @lode/webhook-logs
```

Pro: needs a Lode API key and the `@lode` registry in components.json. See https://lodeui.com/docs/cli.

npm dependencies: motion, lucide-react

## Usage

```tsx title="example.tsx"
import { WebhookLogs } from "@/components/blocks/webhook-logs";

export default function Page() {
  return (
    <main className="mx-auto max-w-6xl p-6">
      <WebhookLogs />
    </main>
  );
}
```

Built from: Action button, Badge, JSON viewer, Segmented control

## API reference

### WebhookLogs

Webhook deliveries filtered by outcome, with the payload as a JSON tree, the raw response and retry. Also the default export. No props: sample data sits at the top of the file, ready to swap for your own.

No props.

## Keyboard interactions

| Keys | Action |
| --- | --- |
| Tab | Move through deliveries and controls |
| Enter / Space | Select a delivery |
| ← / → | Change the filter |

## Accessibility

- The selected delivery uses aria-pressed.
- Status codes are printed, not only colored.

## Motion

- Retry morphs through pending to the new status.

## Responsive behavior

- The inspector moves under the list below 1024px.

## Performance

- Sample data is plain arrays at the top of the file. Replace them with your API data and keep the shapes.

## Notes for AI

- Retry should call your server, which re-sends the stored payload.

## Related

- [JSON viewer](https://lodeui.com/components/json-viewer) — Collapsible, syntax-colored JSON tree.
- [Action button](https://lodeui.com/components/action-button) — A button that morphs through saving, saved and failed, right where you clicked.
- [API playground](https://lodeui.com/blocks/api-playground) — Pick an endpoint, edit headers and body, send, and read the JSON response or cURL.