Panel | NookDocs | NookDocs

Usage

<Panel> claims the right column of the docs page sidebar, replacing the default "On this page" TOC with content of your choosing. Use it on API endpoint pages to show request/response examples next to the prose:

## <ApiMethod method="POST" /> `/v1/projects`

Create a new documentation project under the authenticated organization.
The slug must be unique within your account.

<Panel title="Sample request">
  <RequestExample>
    ```bash cURL
    curl -X POST https://api.nookdocs.com/v1/projects \
      -H "Authorization: Bearer $TOKEN"
    ```
  </RequestExample>
</Panel>

When the reader opens the page on a wide screen (xl+), the panel sticks to the right next to the prose. On smaller screens it falls back inline below the content.

How the right column works

NookDocs pages have an automatic right column that shows the "On this page" table of contents by default. When at least one <Panel> is mounted on the page, the right column automatically switches to panel mode and the TOC is hidden.

This means:

No <Panel> on the page → reader sees the TOC
One or more <Panel> on the page → reader sees the panels (TOC hidden)

There is no manual "use TOC" or "use Panel" toggle — adding a <Panel> is the toggle.

Multiple panels

You can stack several panels in a single page. They render in document order:

<Panel title="Sample request">
  <RequestExample>...</RequestExample>
</Panel>

## Authentication

Bearer token in the `Authorization` header.

<Panel title="Sample response">
  <ResponseExample>...</ResponseExample>
</Panel>

The first panel shows up at the top of the right column; subsequent panels stack below it.

Without a title

The title prop is optional — omit it for a borderless content block:

<Panel>
  <RequestExample>...</RequestExample>
</Panel>

When to use Panel vs inline

	Panel (right column)	Inline content
Best for	Reference material that should always be visible while reading	Step-by-step content the reader follows top-to-bottom
API pages	Sample request/response	Authentication intro, prose explanation
Tutorials	Cheat sheet, env vars list	Step-by-step instructions
Mobile	Falls back inline	Native flow

When NOT to use

TOC-only pages: don't add an empty <Panel> just to hide the TOC. If you don't want the TOC, just don't write h2/h3 headings.
Long-form content: panels are sticky-friendly, so they should fit within ~80vh. For longer reference material, use a regular section in the page body.

Props

Prop	Type	Required	Description
`title`	`string`	No	Eyebrow header rendered above the panel content
`children`	`ReactNode`	Yes	Panel body — typically RequestExample, ResponseExample, code block, or short prose

Implementation notes

<Panel> is a client component that portals its content into a hidden host div in the page layout. The host always exists in the DOM so panels can mount into it; it just toggles visibility based on whether any children are present. A MutationObserver in <RightColumn> watches the host and switches between TOC and panel modes accordingly.