Panel
Use Panel to pin custom content like warnings or quick references in the sidebar, keeping it visible while readers scroll.
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. Use it for information that should always be in view: 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)
This note is displayed in the sidebar panel!
Scroll down to see the panel stays visible.
Basic Usage
Wrap any content in a Panel to have it appear in the right sidebar:
<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:
<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.