Usage
<ResponseExample> is the output twin of <RequestExample>. Wraps a <CodeGroup> with a "Response" eyebrow and uses status codes as tab labels.
<ResponseExample>
```json 200
{
"id": "prj_abc123",
"name": "My Docs",
"status": "active",
"created_at": "2026-04-10T09:30:00Z"
}
```
```json 400
{
"error": "invalid_request",
"message": "name is required"
}
```
```json 401
{
"error": "unauthenticated",
"message": "Bearer token missing or invalid"
}
```
</ResponseExample>Response
{
"id": "prj_abc123",
"name": "My Docs",
"status": "active",
"created_at": "2026-04-10T09:30:00Z"
}Convention: status code as tab label
The metastring after json becomes the tab label, so the canonical pattern is to use the HTTP status code:
```json 200
```This makes the response shapes easy to scan at a glance — readers see "200, 400, 401" tabs and know exactly what they're looking at.
Pairing with RequestExample
The two components are designed to be used together. Place <RequestExample> first, then <ResponseExample> directly after:
<RequestExample>
...
</RequestExample>
<ResponseExample>
...
</ResponseExample>Or, for a more compact page, both inside a single <Panel>:
<Panel>
<RequestExample>...</RequestExample>
<ResponseExample>...</ResponseExample>
</Panel>Custom title
<ResponseExample title="Sample response">
...
</ResponseExample>Auto-generation
In Phase 4, the OpenAPI parser auto-generates <ResponseExample> from the responses object in the spec. Every declared status code becomes a tab.
Props
| Prop | Type | Default | Description |
title | string | "Response" | Eyebrow header text |
children | ReactNode | required | Fenced code blocks (one per status code) |