{ "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "template-relay", "title": "Relay: developer API platform", "author": "Ballmac ", "description": "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.", "dependencies": [ "lucide-react" ], "registryDependencies": [ "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" ], "files": [ { "path": "registry/ballmac/components/templates/relay/relay-fonts.ts", "content": "// Ballmac UI: Relay template fonts. https://ui.ballmac.com/templates/template-relay\nimport { Hanken_Grotesk, IBM_Plex_Mono } from \"next/font/google\"\n\nexport const relaySans = Hanken_Grotesk({ variable: \"--relay-sans\", subsets: [\"latin\"], display: \"swap\", preload: false })\nexport const relayMono = IBM_Plex_Mono({ variable: \"--relay-mono\", subsets: [\"latin\"], weight: [\"400\", \"500\", \"600\"], display: \"swap\", preload: false })\n", "type": "registry:component", "target": "@components/ballmac/templates/relay/relay-fonts.ts" }, { "path": "registry/ballmac/components/templates/relay/relay-theme.tsx", "content": "// Ballmac UI: Relay template shell. https://ui.ballmac.com/templates/template-relay\n\"use client\"\n\nimport * as React from \"react\"\nimport { ArrowUpRight, Menu, X } from \"lucide-react\"\n\nimport { cn } from \"@/lib/utils\"\nimport { relayMono, relaySans } from \"@/components/ballmac/templates/relay/relay-fonts\"\n\ntype RelayPage = \"home\" | \"docs\" | \"pricing\" | \"status\"\ntype RelayHrefs = Record\n\nconst defaultHrefs: RelayHrefs = { home: \"/relay\", docs: \"/relay/docs\", pricing: \"/relay/pricing\", status: \"/relay/status\" }\n\n/** Relay's palette: warm paper and black ink with a single orange signal. Dark mode inverts to ink. */\nconst relayCss = `\n.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}\n.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)}\n`\n\nfunction RelayMark({ className }: { className?: string }) {\n return (\n \n \n \n \n )\n}\n\nconst links: { key: RelayPage; label: string }[] = [\n { key: \"docs\", label: \"Docs\" },\n { key: \"pricing\", label: \"Pricing\" },\n { key: \"status\", label: \"Status\" },\n]\n\ntype RelayShellProps = React.ComponentProps<\"div\"> & {\n /** The page being shown, so its nav link is marked current. */\n page: RelayPage\n /** Override where pages live (used by previews). */\n hrefs?: Partial\n}\n\n/** Relay's frame: paper-and-ink theme, fonts, a ruled header and footer. Wrap every Relay page in it. */\nfunction RelayShell({ page, hrefs: overrides, className, style, children, ...props }: RelayShellProps) {\n const hrefs = { ...defaultHrefs, ...overrides }\n const [open, setOpen] = React.useState(false)\n return (\n \n \n
\n
\n \n relay\n \n \n
\n \n \n Get API key\n \n setOpen((v) => !v)}\n className=\"text-muted-foreground hover:text-foreground focus-visible:ring-ring/50 inline-flex size-9 items-center justify-center rounded-md outline-none focus-visible:ring-[3px] md:hidden\"\n >\n {open ? : }\n \n
\n
\n {open && (\n \n )}\n
\n {children}\n
\n
\n
\n relay\n

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

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

{c.title}

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

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

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

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

\n \n {state === \"done\" ? \"Send again\" : \"Send\"} \n \n
\n {state === \"done\" && (\n
\n

HTTP/1.1 202 Accepted

\n 
{`{\n  \"id\": \"evt_9x2k\",\n  \"status\": \"queued\",\n  \"attempts\": [],\n  \"endpoint\": \"ep_billing\"\n}`}
\n
\n )}\n
\n )\n}\n\ntype RelayHomeProps = React.ComponentProps<\"div\"> & { hrefs?: Partial }\n\n/** The Relay home page: hero with a live console, the life of an event, features, a delivery map and code. */\nfunction RelayHome({ hrefs, ...props }: RelayHomeProps) {\n return (\n \n
\n
\n
\n
\n
\n

Webhook infrastructure

\n

Never lose a webhook again.

\n

\n Relay delivers your events to every customer endpoint with retries, signatures, replay and a complete audit trail. You send one request. We make sure it lands.\n

\n \n

Free up to 100,000 events a month. No card needed.

\n
\n \n
\n
\n\n
\n
\n \n {[\"Stripeline\", \"Northbeam\", \"Cashew\", \"Lumen\", \"Paddock\", \"Vantage\", \"Ironclad Co\", \"Helix\"].map((c) => (\n {c}\n ))}\n \n
\n
\n\n {/* Life of an event */}\n
\n
\n
\n

The life of an event

\n

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

\n

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

\n
\n
    \n
  1. \n evt_9x2k · invoice.paid\n received 09:41:02\n
    2. \n {attempts.map((a) => (\n
  2. \n \n {a.ok ? : }\n {a.ok ? \"Delivered\" : \"Failed\"}\n \n
    \n

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

    \n

    {a.note}

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

What you get

\n

Everything between “send” and “received”.

\n
    \n {features.map((f, i) => (\n
  • = 4 && \"sm:border-b-0\", i >= 3 && \"lg:border-b-0\", i < 3 && \"lg:border-b\")}>\n \n

    {f.title}

    \n

    {f.text}

    \n
    • \n ))}\n
\n
\n
\n\n {/* Map */}\n
\n
\n
\n ({ lat: r.lat, lng: r.lng, label: r.city, tone: \"primary\" as const }))}\n arcs={[\n { from: [38.9, -77.4], to: [50.1, 8.7], tone: \"primary\" },\n { from: [37.7, -122.4], to: [38.9, -77.4], tone: \"primary\" },\n { from: [50.1, 8.7], to: [19.1, 72.9], tone: \"primary\" },\n { from: [1.35, 103.8], to: [-33.9, 151.2], tone: \"primary\" },\n ]}\n className=\"text-muted-foreground/70\"\n />\n
\n
\n

Global delivery

\n

Seven regions. Closest one wins.

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

Receiving

\n

Verify in five lines. Dedupe for free.

\n

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

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

Send your first event in two minutes.

\n

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

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

Quickstart

\n

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

\n\n
\n
\n

1. Get an API key

\n

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

\n
\n\n
\n

2. Send an event

\n

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

\n \n
\n\n
\n

3. Receive it

\n

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

\n \n
\n

Dedupe on event.id

\n

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

\n
\n
\n\n
\n

API reference

\n
\n \n \n
\n
\n
\n
\n\n \n
\n \n )\n}\n\nexport { RelayDocs, type RelayDocsProps }\n", "type": "registry:component", "target": "@components/ballmac/templates/relay/relay-docs.tsx" }, { "path": "registry/ballmac/components/templates/relay/relay-pricing.tsx", "content": "// Ballmac UI: Relay pricing page. https://ui.ballmac.com/templates/template-relay\n\"use client\"\n\nimport * as React from \"react\"\nimport { Check, Minus } from \"lucide-react\"\n\nimport { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from \"@/components/ballmac/accordion\"\nimport { Slider } from \"@/components/ballmac/slider\"\nimport { RelayShell, type RelayHrefs } from \"@/components/ballmac/templates/relay/relay-theme\"\nimport { cn } from \"@/lib/utils\"\n\nconst mono = { fontFamily: \"var(--relay-mono)\" } as const\nconst money = new Intl.NumberFormat(\"en-US\", { style: \"currency\", currency: \"USD\", maximumFractionDigits: 0 })\nconst moneyExact = new Intl.NumberFormat(\"en-US\", { style: \"currency\", currency: \"USD\", minimumFractionDigits: 2 })\nconst count = new Intl.NumberFormat(\"en-US\")\n\nconst plans = [\n { 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\"] },\n { 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\"] },\n { 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\"] },\n]\n\nconst rows: { feature: string; free: boolean | string; pro: boolean | string; scale: boolean | string }[] = [\n { feature: \"Endpoints\", free: \"3\", pro: \"Unlimited\", scale: \"Unlimited\" },\n { feature: \"Retry window\", free: \"24 hours\", pro: \"3 days\", scale: \"7 days\" },\n { feature: \"Attempt history\", free: \"7 days\", pro: \"90 days\", scale: \"1 year\" },\n { feature: \"Replay\", free: false, pro: true, scale: true },\n { feature: \"Transformations\", free: false, pro: true, scale: true },\n { feature: \"Per-endpoint rate limits\", free: false, pro: true, scale: true },\n { feature: \"mTLS and IP allow-lists\", free: false, pro: false, scale: true },\n { feature: \"Uptime SLA\", free: false, pro: \"99.9%\", scale: \"99.99%\" },\n]\n\nconst faqs = [\n { 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.\" },\n { 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.\" },\n { 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.\" },\n]\n\nfunction Cell({ v }: { v: boolean | string }) {\n if (typeof v === \"string\") return {v}\n return v ? : \n}\n\ntype RelayPricingProps = React.ComponentProps<\"div\"> & { hrefs?: Partial }\n\n/** Relay pricing: plans, a per-volume estimator with a stepped rate, a comparison table and questions. */\nfunction RelayPricing({ hrefs, ...props }: RelayPricingProps) {\n const [events, setEvents] = React.useState(3_000_000)\n const included = 1_000_000\n const extra = Math.max(0, events - included)\n const t1 = Math.min(extra, 4_000_000)\n const t2 = Math.max(0, extra - 4_000_000)\n const overage = (t1 / 1_000_000) * 8 + (t2 / 1_000_000) * 5\n const total = 49 + overage\n return (\n \n
\n
\n
\n

Pricing

\n

Priced per event. Cheaper as you grow.

\n

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

\n
\n {plans.map((p) => (\n
\n
\n

{p.name}

\n {p.featured && POPULAR}\n
\n

{p.price}{p.per}

\n

{p.events}

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

Estimate your Pro bill

\n

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

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

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

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

Questions

\n \n {faqs.map((f) => (\n {f.q}{f.a}\n ))}\n \n
\n
\n \n )\n}\n\nexport { RelayPricing, type RelayPricingProps }\n", "type": "registry:component", "target": "@components/ballmac/templates/relay/relay-pricing.tsx" }, { "path": "registry/ballmac/components/templates/relay/relay-status.tsx", "content": "// Ballmac UI: Relay status page. https://ui.ballmac.com/templates/template-relay\nimport * as React from \"react\"\nimport { CheckCircle2 } from \"lucide-react\"\n\nimport { RelayShell, type RelayHrefs } from \"@/components/ballmac/templates/relay/relay-theme\"\nimport { cn } from \"@/lib/utils\"\n\nconst mono = { fontFamily: \"var(--relay-mono)\" } as const\n\ntype Day = \"up\" | \"degraded\" | \"down\"\n\n/** Ninety days of history. Fixed, so the server and browser draw the same bars. */\nfunction history(seed: number, degraded: number[], down: number[]): Day[] {\n return Array.from({ length: 90 }, (_, i) => (down.includes(i + seed) ? \"down\" : degraded.includes(i + seed) ? \"degraded\" : \"up\"))\n}\n\nconst components: { name: string; uptime: string; days: Day[] }[] = [\n { name: \"Event ingestion API\", uptime: \"99.998%\", days: history(0, [41], []) },\n { name: \"Delivery workers\", uptime: \"99.991%\", days: history(0, [12, 57], [58]) },\n { name: \"Dashboard\", uptime: \"99.987%\", days: history(0, [23, 24, 71], []) },\n { name: \"Replay and search\", uptime: \"99.996%\", days: history(0, [66], []) },\n { name: \"Webhooks to customers (global)\", uptime: \"99.994%\", days: history(0, [57, 58], []) },\n]\n\nconst incidents = [\n { 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\" },\n { 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\" },\n { 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\" },\n]\n\nconst tone: Record = { up: \"bg-chart-2\", degraded: \"bg-chart-3\", down: \"bg-destructive\" }\nconst word: Record = { up: \"operational\", degraded: \"degraded\", down: \"outage\" }\n\ntype RelayStatusProps = React.ComponentProps<\"div\"> & { hrefs?: Partial }\n\n/** Relay status: an overall banner, 90-day uptime bars per component and recent incidents. */\nfunction RelayStatus({ hrefs, ...props }: RelayStatusProps) {\n return (\n \n
\n

System status

\n

Status

\n
\n \n
\n

All systems operational

\n

Updated 09:41 UTC · Median delivery latency 38 ms

\n
\n
\n\n
\n

Uptime, last 90 days

\n
    \n {components.map((c) => (\n
  • \n
    \n

    {c.name}

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

Past incidents

\n
    \n {incidents.map((i) => (\n
  1. \n

    {i.date} · {i.duration}

    \n

    {i.title} {i.status}

    \n

    {i.body}

    \n
    2. \n ))}\n
\n
\n
\n \n )\n}\n\nexport { RelayStatus, type RelayStatusProps }\n", "type": "registry:component", "target": "@components/ballmac/templates/relay/relay-status.tsx" }, { "path": "registry/ballmac/app/relay/page.tsx", "content": "// Ballmac UI: Relay template route. https://ui.ballmac.com/templates/template-relay\nimport type { Metadata } from \"next\"\n\nimport { RelayHome } from \"@/components/ballmac/templates/relay/relay-home\"\n\nexport const metadata: Metadata = {\n title: \"Relay: Never lose a webhook again\",\n description: \"Reliable webhook delivery with retries, signatures, replay and a full audit trail.\",\n}\n\nexport default function Page() {\n return \n}\n", "type": "registry:page", "target": "app/relay/page.tsx" }, { "path": "registry/ballmac/app/relay/docs/page.tsx", "content": "// Ballmac UI: Relay template route. https://ui.ballmac.com/templates/template-relay\nimport type { Metadata } from \"next\"\n\nimport { RelayDocs } from \"@/components/ballmac/templates/relay/relay-docs\"\n\nexport const metadata: Metadata = {\n title: \"Relay docs: Quickstart\",\n description: \"Send your first event and verify it in two minutes.\",\n}\n\nexport default function Page() {\n return \n}\n", "type": "registry:page", "target": "app/relay/docs/page.tsx" }, { "path": "registry/ballmac/app/relay/pricing/page.tsx", "content": "// Ballmac UI: Relay template route. https://ui.ballmac.com/templates/template-relay\nimport type { Metadata } from \"next\"\n\nimport { RelayPricing } from \"@/components/ballmac/templates/relay/relay-pricing\"\n\nexport const metadata: Metadata = {\n title: \"Relay pricing\",\n description: \"Priced per event, and cheaper as you grow.\",\n}\n\nexport default function Page() {\n return \n}\n", "type": "registry:page", "target": "app/relay/pricing/page.tsx" }, { "path": "registry/ballmac/app/relay/status/page.tsx", "content": "// Ballmac UI: Relay template route. https://ui.ballmac.com/templates/template-relay\nimport type { Metadata } from \"next\"\n\nimport { RelayStatus } from \"@/components/ballmac/templates/relay/relay-status\"\n\nexport const metadata: Metadata = {\n title: \"Relay status\",\n description: \"Uptime and incidents for every Relay component.\",\n}\n\nexport default function Page() {\n return \n}\n", "type": "registry:page", "target": "app/relay/status/page.tsx" } ], "meta": { "schema": 1, "tier": "free", "tags": [ "template", "developer", "api", "docs", "devtool", "pricing", "status page", "landing page" ], "version": "1.0.0", "updated": "2026-10-01", "ai": { "summary": "Installs a four-page site for a developer API or infrastructure product. Change the palette in relayCss (relay-theme.tsx), the samples in relay-samples.ts, and the copy in each page file.", "whenToUse": [ "Marketing and docs sites for APIs, SDKs and developer infrastructure", "Brands that want a precise, terminal-flavoured look in light and dark" ], "whenNotToUse": [ "Consumer apps or soft, editorial brands (use a Northwind-style template)" ], "composesWith": [ "api-endpoint", "snippet-tabs", "faq-2" ], "a11y": [], "customization": [ "Edit relayCss for the light and dark palettes", "Replace relay-samples.ts with your own languages", "Swap fonts in relay-fonts.ts" ] }, "examples": [ "template-relay-demo", "template-relay-docs", "template-relay-pricing", "template-relay-status" ], "url": "https://ui.ballmac.com/components/template-relay" }, "docs": "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.", "categories": [ "templates" ], "type": "registry:block" }