# Panel

> For the complete documentation index, see [llms.txt](https://preview.writedocs.io/llms.txt).

Content pinned to the right-hand column, in place of the table of contents - in view while the reader scrolls.

On a wide screen, a `Panel`'s content moves into the right-hand column, in place of the page's table of contents, and stays in view as the reader scrolls. Use it for something to keep at hand while reading: a summary, a requirement, a diagram, a code sample. This page has one - it's on the right.

> **Before you start**
>
> You'll need:
>
> - An API key, from the dashboard
> - Node.js 22 or newer

```bash Install
npm install acme-sdk
```

````mdx
<Panel>
  <Callout type="info" title="Before you start">
    You'll need:

    - An API key, from the dashboard
    - Node.js 22 or newer
  </Callout>

  ```bash Install
  npm install acme-sdk
  ```
</Panel>
````

A panel holds any content - Markdown, code blocks, components. It can go anywhere in the page; its place doesn't matter on a wide screen.

## How it works

- **It replaces the table of contents** on that page. Use it on pages where what it holds matters more than the list of sections.
- **On a narrower screen**, where the right-hand column isn't shown, its content stays in the page, where you wrote it.
- **Only in the `default` page mode** - in the other [modes](https://preview.writedocs.io/docs/content/page-modes/) there's no right-hand column, and the content stays in the page.
- **With RequestExample and ResponseExample**: put them inside the panel to show them together with other content - see [RequestExample and ResponseExample](https://preview.writedocs.io/docs/content/components/request-response-example/).

## Props

`Panel` has no props.