184 Components
Interactive API Endpoint Bar
CardsPostman and Scalar inspired monospace live HTTP request runner with method pills (GET, POST, PUT, DELETE), endpoint path editing, status latency indicators, and expandable JSON response viewer.
Installation
Install directly into your project using the shadcn CLI or copy the source code manually.
Requires:framer-motionlucide-reactclsxtailwind-merge
$npx shadcn@latest add "https://boseui.site/r/interactive-api-endpoint-bar.json"
Props
TypeScript props supported by <InteractiveApiEndpointBar />.
| Prop | Type | Default | Description |
|---|---|---|---|
| defaultMethod | "GET" | "POST" | "PUT" | "PATCH" | "DELETE" | "GET" | Default HTTP method selected. |
| defaultEndpoint | string | "https://api.boseui.com/v1/users/usr_94b1e84a" | Endpoint URL route displayed in the input field. |
| latencyMs | number | 28 | Simulated response latency in milliseconds. |
| statusCode | number | 200 | Simulated HTTP response status code. |
Key Features
- Support for GET, POST, PUT, PATCH, and DELETE methods with color-coded badges.
- Live mock execution with simulated latency and animated loading spinner.
- Expandable JSON response body, HTTP headers, and query parameters tabs.
- One-click copy for endpoint URL and formatted cURL command.
Keyboard & Accessibility
- Full keyboard navigation and semantic form controls.
- High contrast status badges with accessible ARIA live states.