---
title: "Components"
description: "Presentational webhook UI: tables, charts, forms, panels. Props in, nothing fetched inside, every field aligned with the library types."
---

Components are purely presentational: they render what you pass them and call back on interaction. Field names line up with [`@repost/portal-js`](/docs/ui/portal-js) types, so hook results flow straight in, but any data of the same shape works, including your own fixtures in tests and Storybook.

```bash
npx shadcn@latest add @repost/delivery-history-table
```

```tsx
import { DeliveryHistoryTable } from "@/components/delivery-history-table";

<DeliveryHistoryTable rows={rows} onRowClick={openDetail} selectedRowId={selectedId} />
```

## The components

| Component | Renders |
|-----------|---------|
| `@repost/delivery-history-table` | Delivery history: one row per attempt with time, event type, endpoint, status badge, latency. |
| `@repost/delivery-attempts-panel` | One delivery's attempt timeline with response bodies. |
| `@repost/webhook-metrics-cards` | Deliveries / success rate / failures with sparklines. |
| `@repost/deliveries-histogram-chart` | The stacked delivered/failed histogram. |
| `@repost/endpoints-list` | Endpoints with status, DLQ badges, and row actions. |
| `@repost/endpoint-form` | The endpoint create/edit form with client-side validation. |
| `@repost/dlq-panel` | Dead-lettered deliveries with a replay affordance. |
| `@repost/event-catalog-browser` | Grouped event types with schema-derived sample payloads. |

## Primitives

The pieces underneath install the same way and are resolved automatically as dependencies: `data-table` (grid layout, column sizing/visibility, skeleton loading), `chart` (themed Recharts wrapper), `sparkline-area-chart`, `delta`, `status-code-badge`, `status-indicator`, `badge`, `button`, `input`, `label`, `skeleton`.

Shared structural types (`webhook-types`) and deterministic demo data (`webhook-fixtures`) are registry items too: the same fixtures power the [previews](/docs/components) and the components' own tests.

## Theming

Everything is styled with CVA over standard shadcn tokens (`background`, `muted`, `primary`, ...) plus status tokens (`--status-success`, `--status-error`, `--status-warning`, `--status-info`) that the CLI injects into your CSS on install with light and dark values. Override tokens to rebrand globally, or edit the installed source for anything structural.

## Live previews and API reference

Every component has its own page on [repost.sh](/docs/components) with an interactive preview, the demo source, its full props table, and the code the CLI copies into your project:

<Columns cols={2} className="gap-y-4">
  <Card title="Delivery history table" icon="table" href="/docs/components/delivery-history-table" arrow="true">
    Attempts with status, latency, and event type.
  </Card>

  <Card title="Metrics & histogram" icon="chart-column" href="/docs/components/webhook-metrics-cards" arrow="true">
    Headline cards and the delivered/failed chart.
  </Card>

  <Card title="Endpoints & forms" icon="list" href="/docs/components/endpoints-list" arrow="true">
    Endpoint list, create/edit form.
  </Card>

  <Card title="DLQ & event catalog" icon="rotate-ccw" href="/docs/components/dlq-panel" arrow="true">
    Dead-letter replay and the catalog browser.
  </Card>
</Columns>