# Relay: developer API platform > A paper-and-ink, terminal-flavoured site for a developer API: a live send console, the life of an event, a delivery map, language-synced docs, usage pricing and a status page. A shadcn/ui block from the [@ballmac](https://ui.ballmac.com) registry, listed on [shadcn.exchange](https://shadcn.exchange/r/ballmac/template-relay). - Page, with a live preview: https://shadcn.exchange/r/ballmac/template-relay - Screenshot: https://abzjhwgwpdpz7ua5.public.blob.vercel-storage.com/shots/ballmac/template-relay-light-2159f04e931b8c77.png - Registry item: https://ui.ballmac.com/r/template-relay.json - Categories: templates - Listed: 2026-10-14, source last changed 2026-10-14 ## Install ```bash npx shadcn@latest add https://ui.ballmac.com/r/template-relay.json ``` Run it in a project that has shadcn/ui set up. It adds the files below and installs what they depend on. ## Dependencies - npm packages: `lucide-react` - Registry items: `utils`, `https://ui.ballmac.com/r/accordion.json`, `https://ui.ballmac.com/r/api-endpoint.json`, `https://ui.ballmac.com/r/dotted-map.json`, `https://ui.ballmac.com/r/marquee.json`, `https://ui.ballmac.com/r/number-ticker.json`, `https://ui.ballmac.com/r/slider.json`, `https://ui.ballmac.com/r/snippet-tabs.json`, `https://ui.ballmac.com/r/table-of-contents.json` ## Notes from the registry Pages are at /relay, /relay/docs, /relay/pricing and /relay/status. The light and dark palettes are the relayCss string in relay-theme.tsx; code samples live in relay-samples.ts. ## Files ### `registry/ballmac/components/templates/relay/relay-fonts.ts` ```ts // Ballmac UI: Relay template fonts. https://ui.ballmac.com/templates/template-relay import { Hanken_Grotesk, IBM_Plex_Mono } from "next/font/google" export const relaySans = Hanken_Grotesk({ variable: "--relay-sans", subsets: ["latin"], display: "swap", preload: false }) export const relayMono = IBM_Plex_Mono({ variable: "--relay-mono", subsets: ["latin"], weight: ["400", "500", "600"], display: "swap", preload: false }) ``` ### `registry/ballmac/components/templates/relay/relay-theme.tsx` ```tsx // Ballmac UI: Relay template shell. https://ui.ballmac.com/templates/template-relay "use client" import * as React from "react" import { ArrowUpRight, Menu, X } from "lucide-react" import { cn } from "@/lib/utils" import { relayMono, relaySans } from "@/components/ballmac/templates/relay/relay-fonts" type RelayPage = "home" | "docs" | "pricing" | "status" type RelayHrefs = Record const defaultHrefs: RelayHrefs = { home: "/relay", docs: "/relay/docs", pricing: "/relay/pricing", status: "/relay/status" } /** Relay's palette: warm paper and black ink with a single orange signal. Dark mode inverts to ink. */ const relayCss = ` .relay-theme{--background:oklch(0.975 0.008 85);--foreground:oklch(0.17 0.01 60);--card:oklch(0.99 0.006 85);--card-foreground:oklch(0.17 0.01 60);--popover:oklch(0.99 0.006 85);--popover-foreground:oklch(0.17 0.01 60);--primary:oklch(0.17 0.01 60);--primary-foreground:oklch(0.975 0.008 85);--secondary:oklch(0.94 0.012 85);--secondary-foreground:oklch(0.17 0.01 60);--muted:oklch(0.94 0.012 85);--muted-foreground:oklch(0.48 0.02 70);--accent:oklch(0.93 0.016 80);--accent-foreground:oklch(0.17 0.01 60);--border:oklch(0.17 0.01 60 / 14%);--input:oklch(0.17 0.01 60 / 20%);--ring:oklch(0.62 0.2 45);--surface:oklch(0.96 0.01 85);--destructive:oklch(0.55 0.22 27);--chart-1:oklch(0.52 0.19 42);--chart-2:oklch(0.46 0.12 160);--chart-3:oklch(0.7 0.15 85);--chart-4:oklch(0.5 0.17 265);--chart-5:oklch(0.55 0.2 330);--radius:0.375rem} .dark .relay-theme{--background:oklch(0.15 0.008 60);--foreground:oklch(0.95 0.01 85);--card:oklch(0.185 0.01 60);--card-foreground:oklch(0.95 0.01 85);--popover:oklch(0.2 0.01 60);--popover-foreground:oklch(0.95 0.01 85);--primary:oklch(0.95 0.01 85);--primary-foreground:oklch(0.17 0.01 60);--secondary:oklch(0.24 0.012 60);--secondary-foreground:oklch(0.95 0.01 85);--muted:oklch(0.23 0.012 60);--muted-foreground:oklch(0.72 0.02 80);--accent:oklch(0.27 0.014 60);--accent-foreground:oklch(0.95 0.01 85);--border:oklch(0.95 0.01 85 / 14%);--input:oklch(0.95 0.01 85 / 20%);--ring:oklch(0.72 0.19 50);--surface:oklch(0.17 0.009 60);--destructive:oklch(0.7 0.19 25);--chart-1:oklch(0.74 0.18 50);--chart-2:oklch(0.78 0.14 165);--chart-3:oklch(0.83 0.14 90);--chart-4:oklch(0.72 0.14 265);--chart-5:oklch(0.74 0.17 335)} ` function RelayMark({ className }: { className?: string }) { return ( ) } const links: { key: RelayPage; label: string }[] = [ { key: "docs", label: "Docs" }, { key: "pricing", label: "Pricing" }, { key: "status", label: "Status" }, ] type RelayShellProps = React.ComponentProps<"div"> & { /** The page being shown, so its nav link is marked current. */ page: RelayPage /** Override where pages live (used by previews). */ hrefs?: Partial } /** Relay's frame: paper-and-ink theme, fonts, a ruled header and footer. Wrap every Relay page in it. */ function RelayShell({ page, hrefs: overrides, className, style, children, ...props }: RelayShellProps) { const hrefs = { ...defaultHrefs, ...overrides } const [open, setOpen] = React.useState(false) return (
relay
Log in Get API key
{open && ( )}
{children}
relay

Reliable webhook delivery for teams that can’t afford to drop an event.

{[ { title: "Product", items: [["Delivery", "home"], ["Retries", "home"], ["Replay", "home"], ["Pricing", "pricing"]] }, { title: "Developers", items: [["Documentation", "docs"], ["API reference", "docs"], ["SDKs", "docs"], ["Status", "status"]] }, { title: "Company", items: [["About", "home"], ["Security", "home"], ["Careers", "home"], ["Contact", "home"]] }, ].map((c) => (

{c.title}

    {c.items.map(([label, key]) => (
  • {label}
    • ))}
))}

© 2026 Relay, Inc. · SOC 2 Type II · 99.99% delivery SLA

) } export { RelayMark, RelayShell, defaultHrefs as relayDefaultHrefs, type RelayHrefs, type RelayPage, type RelayShellProps } ``` ### `registry/ballmac/components/templates/relay/relay-samples.ts` ```ts // Ballmac UI: Relay code samples. https://ui.ballmac.com/templates/template-relay import type { Snippet } from "@/components/ballmac/snippet-tabs" /** The package the samples install. Kept in a variable so it is documentation, not a dependency of this file. */ const pkg = "@relay/sdk" /** Sending an event, in four languages. */ export const sendSnippets: Snippet[] = [ { label: "curl", language: "bash", code: `curl https://api.relay.dev/v1/events \\ -H "Authorization: Bearer {{key}}" \\ -H "Content-Type: application/json" \\ -d '{ "type": "invoice.paid", "endpoint": "ep_billing", "data": { "id": "inv_1042", "amount": 4900 } }'`, }, { label: "TypeScript", language: "typescript", code: `import { Relay } from ${JSON.stringify(pkg)} const relay = new Relay("{{key}}") await relay.events.send({ type: "invoice.paid", endpoint: "ep_billing", data: { id: "inv_1042", amount: 4900 }, })`, }, { label: "Python", language: "python", code: `from relay import Relay relay = Relay("{{key}}") relay.events.send( type="invoice.paid", endpoint="ep_billing", data={"id": "inv_1042", "amount": 4900}, )`, }, { label: "Go", language: "go", code: `client := relay.New("{{key}}") _, err := client.Events.Send(ctx, relay.Event{ Type: "invoice.paid", Endpoint: "ep_billing", Data: map[string]any{"id": "inv_1042", "amount": 4900}, })`, }, ] /** Verifying a signature, in four languages. */ export const verifySnippets: Snippet[] = [ { label: "curl", language: "bash", code: `# Recompute the signature yourself to check a delivery SIGNED="$TIMESTAMP.$BODY" printf '%s' "$SIGNED" | openssl dgst -sha256 -hmac "$RELAY_SECRET" # The result must match the Relay-Signature header`, }, { label: "TypeScript", language: "typescript", code: `import { verify } from ${JSON.stringify(pkg)} export async function POST(req: Request) { const body = await req.text() const event = verify(body, req.headers, process.env.RELAY_SECRET!) // event.id is stable across retries: use it to dedupe return new Response("ok") }`, }, { label: "Python", language: "python", code: `from relay import verify @app.post("/webhooks") def webhook(request): event = verify(request.body, request.headers, RELAY_SECRET) # event.id is stable across retries: use it to dedupe return "ok"`, }, { label: "Go", language: "go", code: `func webhook(w http.ResponseWriter, r *http.Request) { body, _ := io.ReadAll(r.Body) event, err := relay.Verify(body, r.Header, secret) // event.ID is stable across retries: use it to dedupe w.WriteHeader(http.StatusOK) }`, }, ] ``` ### `registry/ballmac/components/templates/relay/relay-home.tsx` ```tsx // Ballmac UI: Relay home page. https://ui.ballmac.com/templates/template-relay "use client" import * as React from "react" import { ArrowRight, Check, Clock, History, KeyRound, ListRestart, Radar, ShieldCheck, Shuffle, X } from "lucide-react" import { DottedMap } from "@/components/ballmac/dotted-map" import { Marquee } from "@/components/ballmac/marquee" import { NumberTicker } from "@/components/ballmac/number-ticker" import { SnippetTabs } from "@/components/ballmac/snippet-tabs" import { RelayShell, type RelayHrefs } from "@/components/ballmac/templates/relay/relay-theme" import { sendSnippets, verifySnippets } from "@/components/ballmac/templates/relay/relay-samples" import { cn } from "@/lib/utils" const mono = { fontFamily: "var(--relay-mono)" } as const const label = "text-muted-foreground text-xs font-semibold tracking-wider uppercase" const attempts = [ { n: 1, t: "0.0 s", status: "503", note: "billing.acme.co unavailable", ok: false }, { n: 2, t: "+30 s", status: "timeout", note: "No response in 10 s", ok: false }, { n: 3, t: "+5 min", status: "200", note: "Delivered in 142 ms", ok: true }, ] const features = [ { icon: ListRestart, title: "Retries that make sense", text: "Exponential backoff with jitter for 3 days. Circuit breakers pause a sick endpoint instead of hammering it." }, { icon: ShieldCheck, title: "Signed and verifiable", text: "Every delivery is signed with a rotating secret and a timestamp. Verifying takes five lines in any language." }, { icon: History, title: "Replay anything", text: "Re-send one event or a whole day to any endpoint, including your laptop, with one click or one command." }, { icon: Shuffle, title: "Transform in flight", text: "Reshape payloads, filter by field and fan out to many endpoints without changing your producer." }, { icon: Radar, title: "See every attempt", text: "Request, response, headers and latency for each try, searchable for 90 days and exportable to your logs." }, { icon: KeyRound, title: "Per-endpoint controls", text: "Rate limits, IP allow-lists and mTLS for each destination, so one slow consumer never slows the rest." }, ] const regions = [ { name: "iad1", city: "Virginia", ms: 11, lat: 38.9, lng: -77.4 }, { name: "sfo1", city: "San Francisco", ms: 14, lat: 37.7, lng: -122.4 }, { name: "gru1", city: "São Paulo", ms: 23, lat: -23.5, lng: -46.6 }, { name: "fra1", city: "Frankfurt", ms: 9, lat: 50.1, lng: 8.7 }, { name: "bom1", city: "Mumbai", ms: 19, lat: 19.1, lng: 72.9 }, { name: "sin1", city: "Singapore", ms: 12, lat: 1.35, lng: 103.8 }, { name: "syd1", city: "Sydney", ms: 16, lat: -33.9, lng: 151.2 }, ] function Console() { const [state, setState] = React.useState<"idle" | "sending" | "done">("idle") const timer = React.useRef | undefined>(undefined) React.useEffect(() => () => clearTimeout(timer.current), []) function send() { setState("sending") clearTimeout(timer.current) timer.current = setTimeout(() => setState("done"), 650) } return (

{state === "idle" ? "POST /v1/events" : state === "sending" ? "Sending…" : "202 Accepted · 38 ms · iad1"}

{state === "done" && (

HTTP/1.1 202 Accepted

{`{
  "id": "evt_9x2k",
  "status": "queued",
  "attempts": [],
  "endpoint": "ep_billing"
}`}
)}
) } type RelayHomeProps = React.ComponentProps<"div"> & { hrefs?: Partial } /** The Relay home page: hero with a live console, the life of an event, features, a delivery map and code. */ function RelayHome({ hrefs, ...props }: RelayHomeProps) { return (
{["Stripeline", "Northbeam", "Cashew", "Lumen", "Paddock", "Vantage", "Ironclad Co", "Helix"].map((c) => ( {c} ))}
{/* Life of an event */}

The life of an event

Your customer’s server was down. Your event still arrived.

Endpoints fail all the time. Relay keeps trying on a schedule that respects the receiver, then tells you exactly what happened.

  1. evt_9x2k · invoice.paid received 09:41:02
    2. {attempts.map((a) => (
  2. {a.ok ?

    Attempt {a.n} · {a.status}

    {a.note}

    3. ))}
{/* Features in a ruled grid */}

What you get

Everything between “send” and “received”.

    {features.map((f, i) => (
  • = 4 && "sm:border-b-0", i >= 3 && "lg:border-b-0", i < 3 && "lg:border-b")}>
    • ))}
{/* Map */}
({ lat: r.lat, lng: r.lng, label: r.city, tone: "primary" as const }))} arcs={[ { from: [38.9, -77.4], to: [50.1, 8.7], tone: "primary" }, { from: [37.7, -122.4], to: [38.9, -77.4], tone: "primary" }, { from: [50.1, 8.7], to: [19.1, 72.9], tone: "primary" }, { from: [1.35, 103.8], to: [-33.9, 151.2], tone: "primary" }, ]} className="text-muted-foreground/70" />

Global delivery

Seven regions. Closest one wins.

{regions.map((r) => (
{r.name} · {r.city}
{r.ms} ms
))}
{/* Verify */}

Receiving

Verify in five lines. Dedupe for free.

Choose a language once. Every sample in these docs follows you.

{/* Stats */}
{[ { v: 12.8, s: "B", l: "Events delivered each month", d: 1 }, { v: 99.99, s: "%", l: "Delivery success within 3 days", d: 2 }, { v: 38, s: " ms", l: "Median time to first attempt", d: 0 }, { v: 90, s: " days", l: "Searchable attempt history", d: 0 }, ].map((x) => (
{x.s}
{x.l}
))}

Send your first event in two minutes.

One API key, one request. The free plan includes 100,000 events a month.

Get your API key
) } export { RelayHome, type RelayHomeProps } ``` ### `registry/ballmac/components/templates/relay/relay-docs.tsx` ```tsx // Ballmac UI: Relay docs page. https://ui.ballmac.com/templates/template-relay "use client" import * as React from "react" import { ChevronRight } from "lucide-react" import { ApiEndpoint } from "@/components/ballmac/api-endpoint" import { SnippetTabs } from "@/components/ballmac/snippet-tabs" import { TableOfContents } from "@/components/ballmac/table-of-contents" import { RelayShell, type RelayHrefs } from "@/components/ballmac/templates/relay/relay-theme" import { sendSnippets, verifySnippets } from "@/components/ballmac/templates/relay/relay-samples" import { cn } from "@/lib/utils" const mono = { fontFamily: "var(--relay-mono)" } as const const nav = [ { title: "Get started", items: ["Introduction", "Quickstart", "Authentication"] }, { title: "Concepts", items: ["Events and endpoints", "Retries and backoff", "Signatures", "Replay"] }, { title: "API reference", items: ["Send an event", "List attempts", "Replay an event"] }, { title: "Guides", items: ["Verify in Next.js", "Test locally", "Go to production"] }, ] const h2 = "scroll-mt-24 text-2xl font-semibold tracking-[-0.03em]" type RelayDocsProps = React.ComponentProps<"div"> & { hrefs?: Partial } /** Relay docs: sidebar, a quickstart with language-synced samples, API reference and an on-page contents list. */ function RelayDocs({ hrefs, ...props }: RelayDocsProps) { return (

Quickstart

Send your first event and watch it arrive. This takes about two minutes.

1. Get an API key

Create a key in the dashboard under Settings → API keys. Keys starting with rl_test_ never reach real endpoints.

2. Send an event

Pick your language. Your choice is remembered across every sample in the docs.

3. Receive it

Verify the signature, then return a 2xx. Anything else is retried.

Dedupe on event.id

Relay delivers at least once. The id is stable across retries and replays, so store it and skip repeats.

API reference

 ) } export { RelayDocs, type RelayDocsProps } ``` ### `registry/ballmac/components/templates/relay/relay-pricing.tsx` ```tsx // Ballmac UI: Relay pricing page. https://ui.ballmac.com/templates/template-relay "use client" import * as React from "react" import { Check, Minus } from "lucide-react" import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from "@/components/ballmac/accordion" import { Slider } from "@/components/ballmac/slider" import { RelayShell, type RelayHrefs } from "@/components/ballmac/templates/relay/relay-theme" import { cn } from "@/lib/utils" const mono = { fontFamily: "var(--relay-mono)" } as const const money = new Intl.NumberFormat("en-US", { style: "currency", currency: "USD", maximumFractionDigits: 0 }) const moneyExact = new Intl.NumberFormat("en-US", { style: "currency", currency: "USD", minimumFractionDigits: 2 }) const count = new Intl.NumberFormat("en-US") const plans = [ { name: "Free", price: "$0", per: "forever", events: "100,000 events / mo", cta: "Start free", features: ["3 endpoints", "Retries for 24 hours", "7-day attempt history", "Community support"] }, { name: "Pro", price: "$49", per: "per month", events: "1M events / mo", cta: "Start Pro", featured: true, features: ["Unlimited endpoints", "Retries for 3 days", "90-day attempt history", "Replay and transformations", "Email support"] }, { name: "Scale", price: "Custom", per: "annual", events: "Billions of events", cta: "Contact sales", features: ["Dedicated delivery pool", "mTLS and IP allow-lists", "1-year retention", "99.99% SLA", "Shared Slack channel"] }, ] const rows: { feature: string; free: boolean | string; pro: boolean | string; scale: boolean | string }[] = [ { feature: "Endpoints", free: "3", pro: "Unlimited", scale: "Unlimited" }, { feature: "Retry window", free: "24 hours", pro: "3 days", scale: "7 days" }, { feature: "Attempt history", free: "7 days", pro: "90 days", scale: "1 year" }, { feature: "Replay", free: false, pro: true, scale: true }, { feature: "Transformations", free: false, pro: true, scale: true }, { feature: "Per-endpoint rate limits", free: false, pro: true, scale: true }, { feature: "mTLS and IP allow-lists", free: false, pro: false, scale: true }, { feature: "Uptime SLA", free: false, pro: "99.9%", scale: "99.99%" }, ] const faqs = [ { q: "What is an event?", a: "One message you send to Relay, no matter how many endpoints it fans out to or how many retries it needs. Replays count as new events." }, { q: "What happens above my plan’s events?", a: "You pay the rate shown in the calculator. Nothing is throttled, and you can set a hard cap that pauses sending instead." }, { q: "Can I try Pro before paying?", a: "Every account starts with a 14-day Pro trial, no card required. You fall back to Free afterwards." }, ] function Cell({ v }: { v: boolean | string }) { if (typeof v === "string") return {v} return v ? : } type RelayPricingProps = React.ComponentProps<"div"> & { hrefs?: Partial } /** Relay pricing: plans, a per-volume estimator with a stepped rate, a comparison table and questions. */ function RelayPricing({ hrefs, ...props }: RelayPricingProps) { const [events, setEvents] = React.useState(3_000_000) const included = 1_000_000 const extra = Math.max(0, events - included) const t1 = Math.min(extra, 4_000_000) const t2 = Math.max(0, extra - 4_000_000) const overage = (t1 / 1_000_000) * 8 + (t2 / 1_000_000) * 5 const total = 49 + overage return (

Pricing

Priced per event. Cheaper as you grow.

No seats, no endpoint fees, no surprise tiers. Every plan gets the full delivery engine.

{plans.map((p) => (

{p.name}

{p.featured && POPULAR}

{p.price}{p.per}

{p.events}

{p.cta}
    {p.features.map((f) =>
    • )}
))}

Estimate your Pro bill

$49 includes 1M events. Then $8 per million up to 5M, and $5 per million beyond.

{count.format(events)}
setEvents(v[0] ?? events)} formatValue={(v) => `${count.format(v)} events`} />
500k50M
Pro base
$49.00
{count.format(extra)} extra events
{moneyExact.format(overage)}
Per month
{money.format(total)}

Effective rate: {moneyExact.format(total / (events / 1_000_000))} per million events.

{plans.map((p) => )} {rows.map((r) => ( ))}
Plan comparison
Feature{p.name}
{r.feature}

Questions

{faqs.map((f) => ( {f.q}{f.a} ))}
) } export { RelayPricing, type RelayPricingProps } ``` ### `registry/ballmac/components/templates/relay/relay-status.tsx` ```tsx // Ballmac UI: Relay status page. https://ui.ballmac.com/templates/template-relay import * as React from "react" import { CheckCircle2 } from "lucide-react" import { RelayShell, type RelayHrefs } from "@/components/ballmac/templates/relay/relay-theme" import { cn } from "@/lib/utils" const mono = { fontFamily: "var(--relay-mono)" } as const type Day = "up" | "degraded" | "down" /** Ninety days of history. Fixed, so the server and browser draw the same bars. */ function history(seed: number, degraded: number[], down: number[]): Day[] { return Array.from({ length: 90 }, (_, i) => (down.includes(i + seed) ? "down" : degraded.includes(i + seed) ? "degraded" : "up")) } const components: { name: string; uptime: string; days: Day[] }[] = [ { name: "Event ingestion API", uptime: "99.998%", days: history(0, [41], []) }, { name: "Delivery workers", uptime: "99.991%", days: history(0, [12, 57], [58]) }, { name: "Dashboard", uptime: "99.987%", days: history(0, [23, 24, 71], []) }, { name: "Replay and search", uptime: "99.996%", days: history(0, [66], []) }, { name: "Webhooks to customers (global)", uptime: "99.994%", days: history(0, [57, 58], []) }, ] const incidents = [ { date: "Sep 24, 2026", title: "Delayed deliveries in eu-central", status: "Resolved", body: "A partial network failure in Frankfurt slowed deliveries by up to 4 minutes. Events were queued and delivered in order; nothing was lost.", duration: "37 minutes" }, { date: "Aug 15, 2026", title: "Dashboard search timeouts", status: "Resolved", body: "Searches over 30 days of history timed out for 11 minutes after an index rebuild. Ingestion and delivery were unaffected.", duration: "11 minutes" }, { date: "Jul 29, 2026", title: "Elevated 5xx on the ingestion API", status: "Resolved", body: "A bad deploy returned errors for 0.4 percent of requests. We rolled back in 6 minutes. Clients using idempotency keys retried safely.", duration: "6 minutes" }, ] const tone: Record = { up: "bg-chart-2", degraded: "bg-chart-3", down: "bg-destructive" } const word: Record = { up: "operational", degraded: "degraded", down: "outage" } type RelayStatusProps = React.ComponentProps<"div"> & { hrefs?: Partial } /** Relay status: an overall banner, 90-day uptime bars per component and recent incidents. */ function RelayStatus({ hrefs, ...props }: RelayStatusProps) { return (

System status

Status

Uptime, last 90 days

    {components.map((c) => (

  • {c.name}

    {c.uptime}
    d === "up").length} of 90 days operational, ${c.days.filter((d) => d === "degraded").length} degraded, ${c.days.filter((d) => d === "down").length} outage`}> {c.days.map((d, i) => )}
    90 days agoToday
    • ))}
    {(["up", "degraded", "down"] as Day[]).map((d) =>
    • )}

Past incidents

    {incidents.map((i) => (

  1. {i.date} · {i.duration}

    {i.title} {i.status}

    {i.body}

    2. ))}
) } export { RelayStatus, type RelayStatusProps } ``` ### `registry/ballmac/app/relay/page.tsx` ```tsx // Ballmac UI: Relay template route. https://ui.ballmac.com/templates/template-relay import type { Metadata } from "next" import { RelayHome } from "@/components/ballmac/templates/relay/relay-home" export const metadata: Metadata = { title: "Relay: Never lose a webhook again", description: "Reliable webhook delivery with retries, signatures, replay and a full audit trail.", } export default function Page() { return } ``` ### `registry/ballmac/app/relay/docs/page.tsx` ```tsx // Ballmac UI: Relay template route. https://ui.ballmac.com/templates/template-relay import type { Metadata } from "next" import { RelayDocs } from "@/components/ballmac/templates/relay/relay-docs" export const metadata: Metadata = { title: "Relay docs: Quickstart", description: "Send your first event and verify it in two minutes.", } export default function Page() { return } ``` ### `registry/ballmac/app/relay/pricing/page.tsx` ```tsx // Ballmac UI: Relay template route. https://ui.ballmac.com/templates/template-relay import type { Metadata } from "next" import { RelayPricing } from "@/components/ballmac/templates/relay/relay-pricing" export const metadata: Metadata = { title: "Relay pricing", description: "Priced per event, and cheaper as you grow.", } export default function Page() { return } ``` ### `registry/ballmac/app/relay/status/page.tsx` ```tsx // Ballmac UI: Relay template route. https://ui.ballmac.com/templates/template-relay import type { Metadata } from "next" import { RelayStatus } from "@/components/ballmac/templates/relay/relay-status" export const metadata: Metadata = { title: "Relay status", description: "Uptime and incidents for every Relay component.", } export default function Page() { return } ```