---
title: "Webhook Metrics Cards"
description: "Deliveries, success rate, and failures over the window, each with a sparkline."
component: true
---

```tsx
"use client";

import { WebhookMetricsCards } from "@/components/webhook-metrics-cards";
import { fixtureHistogramSlots } from "@/fixtures/webhook-fixtures";

export function WebhookMetricsCardsDemo() {
  return <WebhookMetricsCards slots={fixtureHistogramSlots()} />;
}

```

## Installation

<ItemInstall name="webhook-metrics-cards" target="components/webhook-metrics-cards.tsx" />

## Usage

This component is presentational: it renders what you pass it and calls back on
interaction. In a live dashboard the data comes from `useLogsHistogram({ dateFrom, dateTo })`
([@repost/portal-react](/docs/ui/portal-react)), but any data of
the same shape works.

<ComponentSource name="webhook-metrics-cards-demo" title="components/webhook-metrics-cards-demo.tsx" />

## Props

| Prop | Type | Description |
| ---- | ---- | ----------- |
| `slots` | `WebhookHistogramSlot[]` | Time-bucketed counts. |
| `isLoading` | `boolean` | Renders skeleton values. |
| `failureKeys` | `string[]` | Series keys counted as failures. |