Installation

PreviousNext

The same installation process as shadcn/ui: init, register the @repost registry, add components.

Install

Create project

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

pnpm dlx shadcn@latest init

Register the registry

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

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

Add components

pnpm dlx 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

import { WebhookDashboard } from "@/components/webhook-dashboard"
 
export default function Page() {
  return <WebhookDashboard getToken={getToken} />
}

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:

// 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.