Side Panel

Pin supplementary content - notes, links, examples, anything - to the right side of a page.

The SidePanel component takes over the right rail that normally holds the "On this page" table of contents. Use it when a page benefits more from persistent context - a related link, a note, a quick reference - than from a list of headings.

Side Panel Usage

Place a SidePanel anywhere in your MDX file. On desktop its position in the file does not matter; it always renders in the right rail.

<SidePanel>
  <Callout type="note">Pin a note to the side panel.</Callout>
</SidePanel>

Behavior

• Desktop: the panel is pinned to the right rail and scrolls independently of the page. It is as wide as the navigation sidebar, and on wide screens it grows to the width of the AI chat panel, with the page content, navigation buttons, and footer shifting left to make room.
• Mobile: the panel renders inline, exactly where you placed it in the file. Put it near the top of the page if you want readers to see it first.
• Table of contents: any page containing a SidePanel hides its "On this page" list. The panel and the table of contents share the same column.
• Code samples: a SidePanel shown inside a code block is just text, so documenting the component does not hide your table of contents.

What to put in a panel

Any component works inside a SidePanel. Keep it scannable - the rail is meant for supporting material, not a second article.

<SidePanel>
  <Card title="API Reference" icon="code" href="/api-playground">
    Browse every endpoint.
  </Card>
  <Callout type="tip">Panels scroll independently of the page.</Callout>
</SidePanel>

Properties