---
title: Panel
description: Display custom content in the right sidebar instead of the Table of Contents. Stays visible as users scroll.
---

> **For AI agents:** the complete documentation index is at [llms.txt](/docs/llms.txt). Append `.md` to any page URL for its markdown version.

Panel lets you display custom content in the right sidebar instead of the default Table of Contents. The content stays visible as readers scroll through your page, making it ideal for information that should always be accessible—like quick references, important warnings, or support links.

Use Panel when:
- **Critical information** shouldn't scroll out of view
- **Quick reference** material complements the main content
- **Persistent calls-to-action** need to stay visible (support links, API keys)

<Panel>

<Note>

This note is displayed in the sidebar panel!

</Note>

<Tip>

Scroll down to see the panel stays visible.

</Tip>

</Panel>

## Basic Usage

Wrap any content in a Panel to have it appear in the right sidebar:

```mdx
<Panel>
  <Info>This content appears in the sidebar!</Info>
</Panel>
```

## Common Use Cases

Panels work well for pinned warnings, quick reference cards, and support links:

```mdx
<Panel>
  <Warning>
    API rate limits: 100 requests/minute
  </Warning>
  <Card title="Quick Reference" icon="list">
    **Methods:** GET, POST, PUT, DELETE
    **Auth:** Bearer token required
  </Card>
  <Card title="Need Help?" icon="circle-question" href="https://example.com/support">
    Contact our support team
  </Card>
</Panel>
```

## When NOT to Use Panel

- **Short pages** - The Table of Contents helps users navigate; only replace it when you have more valuable content
- **Standard documentation** - Most pages work better with the default ToC
- **Mobile users** - Panel content is hidden on smaller screens, so ensure critical info is also in the main content

## Behavior

- Appears in right sidebar on desktop (1280px+), hidden on smaller screens
- One Panel per page; replaces the Table of Contents entirely
- Supports any component: Callouts, Cards, CodeGroup, Accordions, etc.

## What's Next?

<Columns cols={2}>
  <Card title="Components Overview" icon="puzzle-piece" href="/components/overview">
    Browse all available components
  </Card>
  <Card title="MDX Basics" icon="file-code" href="/content/mdx-basics">
    Learn how to use components in MDX
  </Card>
</Columns>