API Response Examples

Installation

A real shadcn registry command, not a copy-paste stand-in: it fetches this block plus its button, badge 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/devtools28.tsx instead.

Usage

The file also exports devtools28Demo, 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 { Devtools28, devtools28Demo } from "@/components/blocks/devtools/devtools28";

export default function Page() {
  return <Devtools28 {...devtools28Demo} />;
}

Props

Types

type ApiHeader = { name: string; value: string };

type ApiExample = {
  method: "GET" | "POST" | "PUT" | "PATCH" | "DELETE";
  path: string;
  status: number;
  statusText: string;
  headers: ApiHeader[];
  /** Pretty-printed JSON body shown verbatim in the code panel and copied as-is. */
  body: string;
};

Behavior notes

• Status badge color is derived from the numeric status field at render time: >= 500 is red, >= 400 (and < 500) is amber, anything else is emerald. It reacts to whatever status you pass in, it does not require you to also pick a variant.
• The copy button is real: it calls navigator.clipboard.writeText with that card's exact body string and swaps its icon to a checkmark for two seconds. Each card tracks its own copied state independently, so copying one card's body does not affect another card's button.
• The body is rendered as a plain preformatted string, there is no client-side JSON.parse or re-formatting of it; whatever string you pass in body is exactly what's shown and copied, so make sure it's already pretty-printed the way you want it displayed.
• This block needs "use client" only for the clipboard interaction; nothing about the layout itself requires it.