---
title: "Installation"
description: "The same installation process as shadcn/ui: init, register the @repost registry, add components."
---

## Install

<Steps>

### Create project

Run the `init` command to create a new project or to set up an existing one:

```bash
npx shadcn@latest init
```

### Register the registry

Add the `@repost` namespace once to your `components.json`:

```json
{
  "registries": {
    "@repost": "https://repost.sh/r/{name}.json"
  }
}
```

### Add components

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

The CLI copies the source into your project and resolves everything it needs:
dependent components, npm packages, and the status color tokens.

### Import

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

export default function Page() {
  return <WebhookDashboard getToken={getToken} />
}
```

</Steps>

## Auth for wired blocks

Blocks read live data with a portal access token. Your backend mints one per
customer with your API key. The browser never sees the key:

```ts
// POST /api/repost-portal-token
const response = await fetch(
  `https://api.repost.sh/v1/customers/${customerId}/portal-access`,
  {
    method: "POST",
    headers: { Authorization: `Bearer ${process.env.REPOST_TOKEN}` },
  },
)
const { token } = await response.json()
```

Pass a callback returning that token as `getToken`. Refresh is handled for you.

## Theming

Components use standard shadcn tokens plus status tokens (`--status-success`,
`--status-error`, …) injected on install with light and dark values. Override
them to rebrand, or edit the installed source for anything structural.