Request Viewer
Network request inspector showing headers, response body, and timing waterfall.
lucide-react
lucide-reactLoading...
Installation
$ shadcn add @jalco/request-viewerUsage
import { RequestViewer } from "@/components/request-viewer"<RequestViewer />Examples
Standard Request
GET request
GEThttps://api.github.com/repos/vercel/next.js200 OK247ms
Request Headers
Acceptapplication/vnd.github.v3+json
AuthorizationBearer ghp_****••••••••
User-Agentjalco-dashboard/1.0
Cache-Controlno-cache
Response Headers
Content-Typeapplication/json; charset=utf-8
X-RateLimit-Limit5000
X-RateLimit-Remaining4987
X-GitHub-Request-IdC4F2:3A1E:1B4F2A8:2D5E1C0:65A1B2C3
ETag"abc123def456"
Cache-Controlprivate, max-age=60, s-maxage=60
Status colors
POST request (201 Created)
POSThttps://api.example.com/v1/users201 Created312ms
Request Headers
Content-Typeapplication/json
AuthorizationBearer eyJhbGci••••
X-Request-IDreq_8f3a2b1c
Response Headers
Content-Typeapplication/json
Location/v1/users/usr_7k2m9p
X-Request-IDreq_8f3a2b1c
API Reference
RequestViewer
PropType
HeaderEntry
PropType
TimingEntry
PropType
Notes
- Client component. Uses "use client" for tab switching state only.
- JSON formatting. Response bodies that look like JSON are automatically pretty-printed.
- Status colors. Status badges are color-coded: 2xx green, 3xx blue, 4xx amber, 5xx red.
- Icon library. Uses Lucide icons by default. Since this is copy-paste code, you can swap the imports if your project uses a different icon library.