API Endpoints With Sample CallPRO

Devtools94: API Endpoints With Sample Call

Developer section that lists the common endpoints as hairline rows pairing tone-coded method chips with monospace paths and a line of explanation, beside a dark code panel holding a full sample request and the response it returns.

Installation

Swap YOUR_EMAIL and YOUR_KEY for the email and license key on your account. Find your license key on your account page.

Radix flavor

npx shadcn add "https://ui.beste.co/r/devtools94?email=YOUR_EMAIL&license_key=YOUR_KEY"

Base UI flavor

npx shadcn add "https://ui.beste.co/r-base/devtools94?email=YOUR_EMAIL&license_key=YOUR_KEY"

This installs the block to components/beste/block/devtools94.tsx plus the badge23 and button21 components it uses for the eyebrow and the docs action.

Quick start

The installed file exports devtools94Demo alongside the block: the exact props behind the preview above. Spread it to get a working API section in one line.

import { Devtools94, devtools94Demo } from "@/components/beste/block/devtools94";

export default function ApiPage() {
  return <Devtools94 {...devtools94Demo} />;
}

Then replace the demo with your own props. The code sample is one string, so a template literal keeps the request readable:

import { Devtools94 } from "@/components/beste/block/devtools94";

const sample = `curl https://api.example.com/v1/appointments \\
  -H "Authorization: Bearer $API_KEY" \\
  -d starts_at=2026-05-14T14:30:00Z`;

export default function ApiPage() {
  return (
    <Devtools94
      badge={{ label: "Developers" }}
      heading="Everything the interface does, the API does too"
      description="One REST API over the same records your team works in."
      endpointsLabel="Common endpoints"
      endpoints={[
        {
          method: "GET",
          path: "/v1/members",
          description: "List members with cursor pagination and field filters.",
        },
        {
          method: "POST",
          path: "/v1/appointments",
          description: "Book a slot, with conflict checks across clinician and room.",
        },
      ]}
      code={{ label: "Book an appointment", content: sample }}
      footnote={{
        label: "Sandbox keys are free, and the test workspace resets nightly.",
        button: { label: "Read the API docs", href: "/docs/api" },
      }}
    />
  );
}

Props

type ActionLink = { label: string; href: string };

type Endpoint = { method: string; path: string; description: string };

Behavior notes

• The method chip is tone-coded by a single comparison: GET gets the neutral hairline, anything else gets the accent border and text, so writing verbs stand out without an enum to maintain.
• code.content is rendered verbatim inside <pre><code> with no syntax highlighting and no formatter, which keeps the panel dependency-free. Whatever whitespace you pass is exactly what shows.
• That panel scrolls horizontally on its own (overflow-x-auto), so a long curl line never widens the page or forces the section to scroll sideways.
• The code panel is a fixed dark surface, so its text uses the fixed text-background tokens instead of the adaptive ones and stays dark in light mode.
• Paths are the only monospace in the row: the method chip and the description are set in the body face, which stops the row reading as a wall of code.
• The two halves are an ordinary lg:grid-cols-2 split, not a sticky pairing, so the list and the sample scroll together as one section.