# Beste UI

> Beautiful, accessible blocks, pieces and components for shadcn/ui and Tailwind CSS, built for React and Next.js. Install one with the shadcn CLI and the code is yours to edit: no runtime dependency, nothing to upgrade.

Markdown rendition of https://ui.beste.co/block/devtools94. Every page on the site has one: add `.md` to any address, or send `Accept: text/markdown`.

Last updated: 2026-07-28

Whole catalog for LLMs: https://ui.beste.co/llms.txt. Registry index: https://ui.beste.co/r/registry.json

---
1. /
2. [Blocks](/blocks)
3. /
4. [DevTools](/blocks/devtools)
5. /
6. API Endpoints With Sample Call

# API Endpoints With Sample Call[PRO](/pricing)

A developer section that lists common endpoints as hairline rows pairing tone-coded method chips with monospace paths, beside a dark code panel holding a full sample request and its response.

ViewCodeDocs

Base UI

![](https://oud.pics/sm/l/npm.svg)`npx shadcn add https://ui.beste.co/r-base/devtools94`

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

Upgrade to Pro

Pro blocks install through the shadcn CLI with your license key and ship their full source. Docs and live previews stay open to everyone, so you can read every block's details first.

[Upgrade NowUpgrade Now](/pricing)

### Installation

Swap `YOUR_EMAIL` and `YOUR_KEY` for the email and license key on your account. Find your license key on your [account page](/account).

**Radix flavor**

bashCopy

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

**Base UI flavor**

bashCopy

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

tsxCopy

```
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:

tsxCopy

```
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

| Prop           | Type                                  | Default | Description                                                     |
| -------------- | ------------------------------------- | ------- | --------------------------------------------------------------- |
| badge          | { label: string }                     | –       | Monospace eyebrow above the hairline rule, rendered via Badge23 |
| heading        | string                                | –       | Section heading in the left column                              |
| description    | string                                | –       | Supporting paragraph, right-aligned from md up                  |
| endpointsLabel | string                                | –       | Heading above the endpoint list                                 |
| endpoints      | Endpoint\[\]                          | \[\]    | Hairline rows of method, path, and purpose                      |
| code           | { label: string; content: string }    | –       | Dark panel holding one sample call                              |
| footnote       | { label: string; button: ActionLink } | –       | Closing line and outline button                                 |
| className      | string                                | –       | Extra classes for the outer <section>                           |

tsCopy

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

## More DevTools blocks

[View all DevTools](/blocks/devtools)

[](/block/devtools1)

PRO

devtools1

### API Endpoint Explorer

Interactive REST API endpoint reference with method badges, expandable parameter details, and response types. Grouped by resource.

[](/block/devtools38)

PRO

devtools38

### API Usage Analytics

API analytics dashboard with endpoint usage table. Stats cards for requests, latency, error rate, and active users. Trend indicators and method badges.

[](/block/devtools33)

PRO

devtools33

### Network Request Monitor

Real-time HTTP request interceptor with recording controls. Method badges, status codes, duration timing, size info, and filterable by method/type.

[](/block/devtools7)

PRO

devtools7

### API Response Examples

API documentation cards showing response examples with color-coded status badges. Headers section, JSON body with copy button, success/error variants.

[](/block/devtools6)

PRO

devtools6

### Application Log Viewer

Terminal-style structured log viewer with level filtering. Color-coded INFO, WARN, ERROR, and DEBUG entries with timestamps and source labels.

[](/block/devtools95)

PRO

devtools95

### Feeds And Archive API

A hairline list of every way to follow a publication, each row naming the feed, what it carries and its address, over a copyable one-line request that stands in for the whole API.

## Ship the interface, keep the code.

New blocks, pieces and components every week. Install one with a command and it is yours to edit. No runtime dependency, no upgrade path to fight.

[Browse the libraryBrowse the library](/blocks)[See pricingSee pricing](/pricing)

### Library

* [Blocks](/blocks)
* [Pages](/pages)
* [Pieces](/pieces)
* [Components](/components)
* [Search](/search)

### Learn

* [Docs](/docs)
* [AI & MCP](/docs/mcp)
* [Blog](/blog)
* [Free tools](/tools)
* [What's new?](/changelog)
* [Website Builder](https://beste.co)

### More

* [Pricing](/pricing)
* [Referrals](/referrals)
* [License](/license)
* [GitHub](https://github.com/beste-co/beste-ui)

### Shadcn Blocks

* [Shadcn Hero Blocks](/blocks/hero)
* [Shadcn Feature Blocks](/blocks/feature)
* [Shadcn Pricing Blocks](/blocks/pricing)
* [Shadcn CTA Blocks](/blocks/cta)
* [Shadcn FAQ Blocks](/blocks/faq)
* [Shadcn About Blocks](/blocks/about)
* [Shadcn Stats Blocks](/blocks/stats)
* [Shadcn Footer Blocks](/blocks/footer)
* [Shadcn Navigation Blocks](/blocks/navigation)
* [Shadcn Auth Blocks](/blocks/auth)
* [Shadcn Ecommerce Blocks](/blocks/ecommerce)
* [Shadcn Portfolio Blocks](/blocks/portfolio)
* [Shadcn Showcase Blocks](/blocks/showcase)
* [Shadcn Careers Blocks](/blocks/careers)
* [Shadcn Onboarding Blocks](/blocks/onboarding)
* [Shadcn Coming Soon Blocks](/blocks/coming-soon)
* [Shadcn Post Blocks](/blocks/post)
* [Shadcn Legal Blocks](/blocks/legal)
* [Shadcn Workflow Blocks](/blocks/workflow)
* [Shadcn News Blocks](/blocks/news)

© 2026, [Beste](https://beste.co). All rights reserved.