WebberUI
繁體中文

Docs / API Reference

Dark, code-first API reference and product documentation site.

ProContentdocs8 sections
See it liveSee the plans

Install

npx webberui@latest add "https://webberui.com/r/docs-api-reference.en.json?t=<install token>"

The whole page lands in app/templates/docs-api-reference/. You can also use a long-lived licence key instead: set the Authorization: Bearer <key> header in the registries block of components.json — better for CI or a project several people share. What you may do with the source is in the licence terms.

Sections it ships with

Sections inside one template share the same design tokens, so swapping and reordering them keeps the colours, spacing and animation rhythm consistent. Pick and combine them in the section composer.

  1. 1

    Top Bar & API Overview

    A dark top bar with the Relay API overview, a system-status badge and four info cards covering base URL, version and authentication.

    hero
  2. 2

    Authentication

    Explains Bearer key authentication, with a cURL sample code block and a warning about keeping keys secret.

    content
  3. 3

    Quickstart

    A three-minute getting-started guide: install the SDK, then send your first message in TypeScript.

    content
  4. 4

    API Endpoints

    A left-hand nav tree beside three endpoints — list messages, send a message, create a channel — each with a parameter table and request/response samples.

    product
  5. 5

    Events & Signatures

    Lists the webhook events and shows how to verify the Relay signature with HMAC.

    features
  6. 6

    Error Codes

    A reference table of standard HTTP error codes, plus a sample of the structured error object.

    content
  7. 7

    Rate Limits

    Covers the per-minute request ceiling, what each rate-limit header means and the recommended backoff strategy.

    content
  8. 8

    Footer

    A dark footer with the wordmark, three link columns for product, resources and support, and API uptime status.

    footer

Docs / API Reference is a React API documentation template: a dark, code-first three-column docs site with a collapsible table of contents on the left, endpoint docs and code samples in the middle and on-page anchors on the right. It is built with Next.js App Router, Tailwind CSS and Motion, with the content written directly in page.tsx.

When to use it

  • Reference docs for a developer platform or API product
  • Integration guides for an SDK or webhooks
  • API documentation for internal services
  • Technical docs that need parameter tables, error codes and rate-limit notes

What to change after installing

  1. The left table of contents is `NAV` in page.tsx and the right-hand anchors are `ANCHORS`; ids in both must match content section ids, and the active position is tracked from `ANCHORS`.
  2. Each chapter is its own component, such as `AuthSection`, `QuickstartSection`, `ListMessagesSection`, `WebhooksSection` and `ErrorsSection`; add, remove or rewrite them for your API.
  3. Code samples render through `CodeBlock`; highlighting is marked by hand in `lines` (arrays of `Seg`), and the copy button copies `copyText`, so update both together.
  4. Parameter tables use `ParamTable` with `Param` data, and notes use `Callout`. The search box in the top bar is visual only; connect a search service if you need it.

What you get is source code

Not an npm package, not a zip file. Once installed, the page's TypeScript source sits in your repo: edit it however you like, no runtime dependency, no expiry mechanism. Your site keeps running even if ours goes down.

Browse the other 103 templates →