Add this component

npx zentauri-ui add http-request-viewer

Accessibility notes

Keyboard accessible by default with semantic markup, visible focus treatment, and tokenized states. Add descriptive labels for icon-only or decorative usage.

Dependency notes

Check Installation for shared peers. This component keeps styling in Tailwind classes and the --zui-* token contract.

Data display

HTTP Request Viewer for inspecting API calls

Use the HTTP request viewer to render an outgoing or captured HTTP request as a compact, readable card. A colored method badge and the request URL sit in the header, and the Headers, Query, and Body details split into tabbed panels — request bodies are pretty-printed as JSON, and a copy button puts the body (or a request summary) on the clipboard.

POSThttps://api.example.com/v1/auth/login

{
  "email": "ada@example.com",
  "password": "••••••••",
  "remember": true
}

HTTP request viewer playground

Pick a request, chrome appearance, and size to preview the HTTP request viewer live. Switch between the Headers, Query, and Body tabs, turn on a motion preset for the panel transition, and use Show output / Show code to copy the matching snippet.

Request

Appearance

Size

Animation

POSThttps://api.example.com/v1/auth/login

Content-Type:application/json

X-Request-Id:req_8f21c4

All appearances

Every shipped chrome appearance over the same request. Click any card to load it into the playground above.

default

POSThttps://api.example.com/v1/auth/login

Content-Type:application/json

X-Request-Id:req_8f21c4

subtle

POSThttps://api.example.com/v1/auth/login

Content-Type:application/json

X-Request-Id:req_8f21c4

contrast

POSThttps://api.example.com/v1/auth/login

Content-Type:application/json

X-Request-Id:req_8f21c4

glass

POSThttps://api.example.com/v1/auth/login

Content-Type:application/json

X-Request-Id:req_8f21c4

Http Request Viewer API

Generated from the package prop types and variant definitions.

HttpRequestViewer

HttpRequestViewerProps

Variants

Prop	Type	Default
appearance	`contrastdefaultglasssubtle`	default
size	`lgmdsm`	md

Behavior

Prop	Type	Default
bodyRequest body — pretty-printed as JSON in a code block.	`unknown`	none
defaultTabWhich detail panel is open on first render.	`HttpRequestViewerTab \| undefined`	none
enableClipboardShow a copy button that copies the body JSON (or a request summary).	`boolean \| undefined`	none
headersRequest headers, rendered as key:value rows.	`Record<string, string> \| undefined`	none
labelsOverride default tab / copy copy.	`HttpRequestViewerLabels \| undefined`	none
method*HTTP method, e.g. GET / POST / PUT / PATCH / DELETE.	`string`	none
queryQuery parameters, rendered as key:value rows. Supports multi-value params (e.g. ?id=1&id=2).	`Record<string, string \| string[]> \| undefined`	none
url*Request URL (may include the query string).	`string`	none

Inherited HTML props

Prop	Type	Default
className	`string \| undefined`	none
id	`string \| undefined`	none
onClick	`MouseEventHandler<HTMLDivElement> \| undefined`	none
style	`CSSProperties \| undefined`	none
title	`string \| undefined`	none

HttpRequestViewerVariant

HttpRequestViewerVariantProps

Behavior

Prop	Type	Default
appearance	`'default' \| 'subtle' \| 'contrast' \| 'glass' \| null \| undefined`	none
size	`'md' \| 'sm' \| 'lg' \| null \| undefined`	none

HttpRequestViewerAnimated

HttpRequestViewerAnimatedProps

animated

Behavior

Prop	Type	Default
animationPanel-switch motion preset applied when the active tab changes.	`HttpRequestViewerAnimation \| undefined`	none
appearance	`'default' \| 'subtle' \| 'contrast' \| 'glass' \| null \| undefined`	none
bodyRequest body — pretty-printed as JSON in a code block.	`unknown`	none
defaultTabWhich detail panel is open on first render.	`HttpRequestViewerTab \| undefined`	none
enableClipboardShow a copy button that copies the body JSON (or a request summary).	`boolean \| undefined`	none
headersRequest headers, rendered as key:value rows.	`Record<string, string> \| undefined`	none
labelsOverride default tab / copy copy.	`HttpRequestViewerLabels \| undefined`	none
method*HTTP method, e.g. GET / POST / PUT / PATCH / DELETE.	`string`	none
queryQuery parameters, rendered as key:value rows. Supports multi-value params (e.g. ?id=1&id=2).	`Record<string, string \| string[]> \| undefined`	none
refAllows getting a ref to the component instance. Once the component unmounts, React will set `ref.current` to `null` (or call the ref with `null` if you passed a callback ref).	`Ref<HTMLDivElement> \| undefined`	none
size	`'md' \| 'sm' \| 'lg' \| null \| undefined`	none
url*Request URL (may include the query string).	`string`	none

Inherited HTML props

Prop	Type	Default
className	`string \| undefined`	none
id	`string \| undefined`	none
onClick	`MouseEventHandler<HTMLDivElement> \| undefined`	none
style	`CSSProperties \| undefined`	none
title	`string \| undefined`	none

CSS variable overrides

HTTP Request Viewer CSS variables

Override these HTTP request viewer variables on :root, a theme selector, or a component wrapper.

62 variables

Pattern: --zui-<component>-<slot?>-<variant?>-<property>-<state?>-dark?

:root {
  --zui-http-request-viewer-border: #0000001a;
  --zui-http-request-viewer-bg: oklch(98.4% 0.003 247.858);
  --zui-http-request-viewer-fg: oklch(20.8% 0.042 265.755);
  --zui-http-request-viewer-subtle-bg: oklch(92.9% 0.013 255.508);
  --zui-http-request-viewer-contrast-bg: #ffffff;
  --zui-http-request-viewer-glass-bg: #ffffffcc;
  --zui-http-request-viewer-glass-border: #ffffff66;
  --zui-http-request-viewer-header-bg: oklch(96.8% 0.007 247.896);
  --zui-http-request-viewer-url-fg: oklch(20.8% 0.042 265.755);
  --zui-http-request-viewer-method-get-bg: #dcfce7;
  --zui-http-request-viewer-method-get-fg: #15803d;
  --zui-http-request-viewer-method-post-bg: #dbeafe;
  --zui-http-request-viewer-method-post-fg: #1d4ed8;
  --zui-http-request-viewer-method-put-bg: #ffedd5;
  --zui-http-request-viewer-method-put-fg: #c2410c;
  --zui-http-request-viewer-method-patch-bg: #fef9c3;
  --zui-http-request-viewer-method-patch-fg: #a16207;
  --zui-http-request-viewer-method-delete-bg: #fee2e2;
  --zui-http-request-viewer-method-delete-fg: #b91c1c;
  --zui-http-request-viewer-method-neutral-bg: #e2e8f0;
  --zui-http-request-viewer-method-neutral-fg: #475569;
  --zui-http-request-viewer-tab-fg: oklch(44.6% 0.043 257.281);
  --zui-http-request-viewer-tab-hover-bg: #0000000d;
  --zui-http-request-viewer-tab-active-bg: #ffffff;
  --zui-http-request-viewer-tab-active-fg: #7c3aed;
  --zui-http-request-viewer-action-fg: oklch(44.6% 0.043 257.281);
  --zui-http-request-viewer-action-hover-bg: #0000000d;
  --zui-http-request-viewer-key-fg: #7c3aed;
  --zui-http-request-viewer-value-fg: #16a34a;
  --zui-http-request-viewer-body-fg: oklch(20.8% 0.042 265.755);
  --zui-http-request-viewer-empty-fg: #94a3b8;
}

/* Dark theme variables follow the same names with -dark appended. */
.dark {
  --zui-http-request-viewer-border-dark: #ffffff1a;
  --zui-http-request-viewer-bg-dark: oklch(12.9% 0.042 264.695);
}

Composition and API

Pass the method and url, plus optional headers and query records and a body value. The header renders a method badge colored by HTTP verb (GET, POST, PUT, PATCH, DELETE, with a neutral fallback) next to the monospace URL. The Headers, Query, and Body tabs switch the panel below; key:value records render as rows and the body is pretty-printed with JSON.stringify. defaultTab chooses which panel opens first, enableClipboard toggles the copy button, and labels overrides the tab and copy text. The separate animated entry adds fade and slide motion presets for the panel transition.

Accessibility

Each tab is a real button with aria-selected reflecting the active panel, so keyboard and screen-reader users can move between Headers, Query, and Body. The root and every region carry data-slot attributes for styling and testing, and the method badge exposes a data-method attribute with the uppercased verb. The animated entry's panel transition is short and easing-based; pair it with prefers-reduced-motion handling in your app where needed.

Next.js integration notes

The static HttpRequestViewer entry ships no framer-motion and is safe in any Server or Client Component tree (it is a Client Component because it tracks the active tab). The animated HttpRequestViewerAnimated entry imports framer-motion, which is an optional peer dependency — install it only if you use the animated entry. Both render deterministically from the same props, so server and client output match and there is no hydration mismatch.

FAQ

What request parts can it display?

The method and url in the header, plus optional headers and query records as key:value rows and a body value pretty-printed as JSON. Sections with no data show a muted empty-state line such as No headers.

How is the method badge colored?

The badge color is chosen from the uppercased method: GET, POST, PUT, PATCH, and DELETE each have a tone, and any other verb falls back to a neutral tone. Every tone is a themeable --zui-http-request-viewer-method-* token with a light fallback and a paired dark variant.

Do I need framer-motion?

Only for the animated entry. The default import from @zentauri-ui/zentauri-components/ui/http-request-viewer is framer-motion-free. Import HttpRequestViewerAnimated from the /animated subpath when you want fade or slide transitions between tabs, and install framer-motion as a peer dependency.

How do I theme the colors?

Override the --zui-http-request-viewer-* CSS variables (border, bg, fg, the per-method badge tones, tab, key, value, body, and more) on :root, a theme selector, or a wrapper. Each variable ships a light fallback and a paired -dark variant for dark mode.