Panel
Use Panel to pin custom content like warnings or quick references in the sidebar, where it stays visible while readers scroll.
Panel shows custom content in the right sidebar in place of the Table of Contents. The content stays visible as readers scroll. Use it for 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 content in a Panel to show it in the right sidebar:
<Panel>
<Info>This content appears in the sidebar!</Info>
</Panel>Common Use Cases
A Panel can hold 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 readers navigate. Replace it only with something more valuable
- Standard documentation: most pages work better with the default ToC
- Mobile: Panel content is hidden on smaller screens. Put critical info in the main content too
Behavior
- Appears in right sidebar on desktop (1280px+), hidden on smaller screens
- One Panel per page. It replaces the Table of Contents
- Holds any component: Callouts, Cards, CodeGroup, Accordions, etc.