The <RequestExample> and <ResponseExample> components display code blocks in the right sidebar to create a two-column layout that keeps examples visible while users scroll through your content. These components are designed for API documentation, but they work on all pages.

Common use cases:

  • API endpoint documentation with request and response examples
  • Configuration examples alongside explanatory text
  • Code samples that users reference while following instructions
  • Before and after examples in tutorials

On mobile devices, <RequestExample> and <ResponseExample> components display as regular code blocks and can be scrolled past.

​
RequestExample

Use <RequestExample> to pins code examples in the right sidebar. This component works similarly to the CodeGroup component, but displays the code in the sidebar instead of inline.

You can include multiple code blocks inside a single <RequestExample>. Each code block must have a title attribute.

RequestExample
<RequestExample>

```bash Request
  curl --request POST \
    --url https://dog-api.kinduff.com/api/facts
```

</RequestExample>

​
ResponseExample

The <ResponseExample> component pins code examples in the right sidebar beneath any <RequestExample> content on the same page.

ResponseExample
<ResponseExample>

```json Response
{ "status": "success" }
```

</ResponseExample>