## API Request (S—275)

A tiny HTTP client: method picker, URL, headers and body tabs, Send, then status, timing, size and a formatted response.

- URL: https://sundaeui.dev/components/api-request
- Category: Forms & inputs · Art direction: Refined
- Access: Free (no account needed)
- Stack: React 18+, TypeScript, plain CSS; dependencies: none
- Install: `npx shadcn@latest add https://sundaeui.dev/r/api-request.json`
- Tags: request, api, client, postman, http, rest

Pick a method, edit the path and send. The response panel shows status, time and size, with the JSON body pretty-printed.
Requests go to a handler you pass in, so the demo is fully offline; wire it to fetch for a real console.

### Usage

```tsx
import { ApiRequest } from '@/components/sundae/api-request'

<ApiRequest />
```

### Props

- `handler` (`(req: { method: string; url: string; body: string }) => Promise<{ status: number; body: unknown }>`, required): Executes the request.
- `baseUrl` (`string`): Shown before the path.
- `fill` (`'dark' | 'light'`, default `'dark'`): Surface: dark or light.

### When to use

- API docs try-it panels, developer portals.

### When not to use

- Full API debugging: use a dedicated client.

### Accessibility

- Tabs are a tablist; the response status and time are announced.
- Method select is a native select.
- Reduced motion removes the movement and keeps every state change.

### Keyboard

- ⌘ / Ctrl + Enter: Send