Panel

Panels are for small supporting notes. On wide docs pages, rail panels move beside the article; inline panels stay in the main flow.

Basic example

Use a plain Panel when you want Mintlify-style right side panel content. It replaces the table of contents on desktop and stays inline on narrow screens.

<Panel>
  <Info>Pin info to the side panel. Or add any other component.</Info>
</Panel>

Inline example

<Panel title="Offer context" icon="package" tone="primary" inline>
  Offers own the products, checkout blocks, pricing, and completion behavior for a sale.
</Panel>

Inline panels

Use inline panels when the note is part of the reading path. They should be smaller than a card and quieter than a callout.

<Panel title="Timer context" icon="timer" tone="green" inline>
  Timers can create deadline-aware experiences around an offer.
</Panel>

<Panel title="Implementation boundary" icon="braces" tone="amber" inline>
  If the information is a required step, keep it in the main prose or a Step.
</Panel>

Rail panels

Rail panels can sit beside the article on wide docs pages. Use them for definitions, limits, and small reference notes that should stay visible without interrupting the main task.

<Panel title="Rail note" icon="panel-right" tone="neutral">
  This panel is eligible for right-rail placement in the full docs layout.
</Panel>

Panel with examples

Use this pattern when a non-API concept needs a pinned request and response beside the article. API endpoint pages should usually use ApiEndpoint instead.

<Panel title="Checkout sample" icon="terminal" tone="primary">
  <RequestExample title="Create session" labels={["Shell"]}>

  ```bash title="POST /api/checkout/sessions"
  curl -X POST "https://api.plandalf.com/api/checkout/sessions" \
    -H "Content-Type: application/json" \
    -d '{"offer":"pro-plan"}'
  ```

  </RequestExample>

  <ResponseExample title="Session response" labels={["JSON"]}>

  ```json title="201 checkout session"
  { "session": { "id": "cs_123", "status": "open" } }
  ```

  </ResponseExample>
</Panel>

When to use

Panel usage

Use a panel forsupplementary context

Definitions, implementation boundaries, related product context, and small notes that should not become a full card.

Use a callout forwarnings and consequences

Anything the reader must notice before continuing.

Use columns forparallel explanation

Two or three equally important ideas that need the same visual weight.

Use ApiEndpoint forAPI calls

Endpoint pages should use ApiEndpoint so fields, request information, and right-rail examples stay bound to the active call.

Behavior

Mintlify’s Panel component accepts arbitrary children and places them in the right side panel. In Plandalf docs, the same plain <Panel> pattern is supported.

Plandalf extensions

Related