API Endpoints With Sample Call

Installation

A real shadcn registry command, not a copy-paste stand-in: it fetches this block plus its dependencies and any missing npm packages, and installs them straight into your project.

Prefer not to use the CLI? Copy the source from the Code toggle above into src/components/blocks/devtools/devtools1.tsx instead.

Usage

The file also exports devtools1Demo, the exact props behind the preview above. Spread it to get a working section in one line, then replace it with your own data.

import { Devtools1, devtools1Demo } from "@/components/blocks/devtools/devtools1";

export default function Page() {
  return <Devtools1 {...devtools1Demo} />;
}

Props

Types

type EndpointRow = {
  method: "GET" | "POST" | "PUT" | "PATCH" | "DELETE";
  path: string;
  description: string;
};

Behavior notes

• Entirely static; no client-side interactivity. This is a reference display, not a live API console.
• requestLines and responseLines are plain string arrays joined with "\n" and rendered inside <pre><code> blocks; there is no syntax highlighting, JSON parsing, or line numbering.
• Method chip colors are fixed by method name (GET=sky, POST=emerald, PUT/PATCH=amber, DELETE=red) and are not configurable per-row beyond changing the method.
• The dark request/response panel is a deliberate exception to the site's semantic color tokens, matching the repo's established terminal-window convention, and stays dark regardless of site theme.
• The panel is sticky on large screens (lg:sticky lg:top-24) so it stays visible while the endpoint list scrolls; on mobile it stacks below the list.