---
title: "Blocks"
description: "Complete, wired dashboard views. Hooks at the top of a file you own, presentational components below."
---

Blocks are full views: install one and you have a working customer webhook dashboard. Data flows in through [`@repost/portal-react`](/docs/ui/portal-react) hooks at the top of the block file and down into [presentational components](/docs/ui/components) as props. The wiring is code in your repo. Swap any part.

```bash
npx shadcn@latest add @repost/webhook-dashboard
```

```tsx
import { WebhookDashboard } from "@/components/webhook-dashboard";

export function WebhooksPage() {
  return <WebhookDashboard getToken={getToken} />;
}
```

`getToken` returns a portal access token from [your token endpoint](/docs/ui/portal-react#token-endpoint). Everything else is handled inside: refresh, caching, the live websocket feed.

## The blocks

| Block | Ships |
|-------|-------|
| `@repost/webhook-dashboard` | Headline metrics with sparklines, the delivered/failed histogram, live delivery history, and per-delivery attempt detail. |
| `@repost/endpoint-management` | Endpoint list with status and DLQ badges, create/edit form, pause/resume/delete, signing-secret reveal. |
| `@repost/webhook-dlq` | The dead-letter queue with a count badge and one-click replay. |
| `@repost/event-catalog` | Browsable event types with schema-derived sample payloads and signed test sends to an endpoint. |

All four respect [read-only sessions](/docs/ui/portal-react#read-only-sessions): mint the token with `readOnly: true` and write affordances disable server-side, secrets stay hidden.

## Options

Each block takes a small prop surface, for example the dashboard:

```tsx
<WebhookDashboard
  getToken={getToken}
  endpointId="ep_..."        // narrow to one endpoint
  historyWindowDays={90}     // history window, defaults to 90
/>
```

Because the block is a file in your repo, anything beyond props is an edit away: reorder the sections, drop the histogram, wrap the table in your own card.

## Continue

<Columns cols={2} className="gap-y-4">
  <Card title="Components" icon="component" href="/docs/ui/components" cta="Browse" arrow="true">
    The presentational pieces the blocks compose.
  </Card>

  <Card title="React hooks" icon="plug" href="/docs/ui/portal-react" cta="Libraries" arrow="true">
    The data layer the blocks are wired with.
  </Card>
</Columns>