---
title: "Delivery Attempts Panel"
description: "One delivery's attempt timeline, with status, latency, and response bodies."
component: true
---

```tsx
"use client";

import { DeliveryAttemptsPanel } from "@/components/delivery-attempts-panel";
import { fixtureAttempts } from "@/fixtures/webhook-fixtures";

export function DeliveryAttemptsPanelDemo() {
  return <DeliveryAttemptsPanel attempts={fixtureAttempts()} />;
}

```

## Installation

<ItemInstall name="delivery-attempts-panel" target="components/delivery-attempts-panel.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 `useDeliveryAttempts(deliveryId)`
([@repost/portal-react](/docs/ui/portal-react)), but any data of
the same shape works.

<ComponentSource name="delivery-attempts-panel-demo" title="components/delivery-attempts-panel-demo.tsx" />

## Props

| Prop | Type | Description |
| ---- | ---- | ----------- |
| `attempts` | `WebhookAttempt[]` | Attempts, newest first. |
| `isLoading` | `boolean` | Renders skeletons. |