# Panel
Use panels for supporting context that can sit in the right rail or inline with the page.
Source: /docs/components/panel
Last modified: 2026-06-20
Panels are for small supporting notes. On wide docs pages, rail panels move beside the article; inline panels stay in the main flow.


> **Panel owns the right rail**
>

  A plain `Panel` follows Mintlify's side-panel pattern: it replaces the table of contents on desktop. If request or response examples belong to that side panel, put them inside the `Panel` so the rail stays coherent.


## 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.


  Pin info to the side panel. Or add any other component.


```mdx title="panel-basic.mdx"

  Pin info to the side panel. Or add any other component.


```

## Inline example


> **Offer context**
>

  Offers own the products, checkout blocks, pricing, and completion behavior for a sale.


```mdx title="panel-example.mdx"

> **Offer context**
>

  Offers own the products, checkout blocks, pricing, and completion behavior for a sale.


```

## 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.


> **Timer context**
>

  Timers can create deadline-aware experiences around an offer, but the offer still owns the products and checkout outcome.


> **Implementation boundary**
>

  Use a panel for supporting context. If the information is a required step, keep it in the main prose or a `Step`.


```mdx title="inline-panels.mdx"

> **Timer context**
>

  Timers can create deadline-aware experiences around an offer.


> **Implementation boundary**
>

  If the information is a required step, keep it in the main prose or a Step.


```

## 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.


> **Rail note**
>

  This panel is eligible for right-rail placement in the full docs layout. On narrow screens it stays inline.


```mdx title="rail-panel.mdx"

> **Rail note**
>

  This panel is eligible for right-rail placement in the full docs layout.


```

## 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.


> **Checkout sample**
>


### Create session


  ```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"}'
  ```


### Session response


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


````mdx title="panel-with-examples.mdx"

> **Checkout sample**
>


### Create session


  ```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"}'
  ```


### Session response


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


````

## When to use


### Panel usage


- `Use a panel for` (supplementary context):
    Definitions, implementation boundaries, related product context, and small notes that should not become a full card.


- `Use a callout for` (warnings and consequences):
    Anything the reader must notice before continuing.


- `Use columns for` (parallel explanation):
    Two or three equally important ideas that need the same visual weight.


- `Use ApiEndpoint for` (API 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 `` pattern is supported.

## Plandalf extensions


- `title` (string):
  Panel label.


- `icon` (string):
  Optional icon shown beside the panel label.


- `tone` (neutral | primary | green | amber; default: neutral):
  Visual tone.


- `inline` (boolean; default: false):
  Force the panel to stay in the article instead of moving to the right rail.


- `rail` (boolean; default: true):
  Allow wide-layout rail placement.


- `class | className` (string):
  Optional utility classes for local spacing or sizing.


## Related


  - [Columns](/docs/components/columns): Place small panels side by side.
  - [Callouts](/docs/components/callouts): Use for stronger warnings.
  - [API fields](/docs/components/api-fields-examples): Use endpoint-aware examples.