Sidecar Box

A framed panel with an optional head, body, and footer. The OpenAPI plugin builds its sidecar with it (the request body, response, and example boxes), so reaching for it in custom plugin pages or MDX gives you content that matches that look.

Import

Code
import * as SidecarBox from "zudoku/ui/SidecarBox";
import { SyntaxHighlight } from "zudoku/ui/SyntaxHighlight";

Components

• SidecarBox.Root - The outer framed container
• SidecarBox.Head - Header row, typically a title or controls
• SidecarBox.Body - Main content area with its own inner border
• SidecarBox.Footer - Footer row for notes or actions

Head, Body, and Footer are all optional. Use just Root and Body for a plain framed panel.

With a status badge

The head is a plain flex row, so justify-between aligns a title on the left and a status badge (or any control) on the right, above an embedded code body.

Code
<SidecarBox.Root>
  <SidecarBox.Head className="text-xs flex justify-between items-center">
    <span className="font-medium">GET /users/{id}</span>
    <Badge variant="muted">200</Badge>
  </SidecarBox.Head>
  <SidecarBox.Body className="p-0">
    <SyntaxHighlight embedded language="bash" className="rounded-none text-xs" code={curlExample} />
  </SidecarBox.Body>
</SidecarBox.Root>

Anatomy

All four parts together. The head and footer sit flush against the framed body in the middle.

Code
<SidecarBox.Root>
  <SidecarBox.Head className="font-medium">Response</SidecarBox.Head>
  <SidecarBox.Body className="p-3">A 200 response returns the user object.</SidecarBox.Body>
  <SidecarBox.Footer className="text-muted-foreground text-xs">application/json</SidecarBox.Footer>
</SidecarBox.Root>

With a code block

For code or JSON, drop the body padding with className="p-0" and let an embedded SyntaxHighlight own the spacing. This is the pattern the OpenAPI plugin uses for its example boxes.

Code
<SidecarBox.Root>
  <SidecarBox.Head className="text-xs font-medium">Example response</SidecarBox.Head>
  <SidecarBox.Body className="p-0">
    <SyntaxHighlight
      embedded
      language="json"
      className="rounded-none text-xs"
      code={`{
  "id": "usr_123",
  "name": "Ada Lovelace",
  "active": true
}`}
    />
  </SidecarBox.Body>
  <SidecarBox.Footer className="text-muted-foreground text-xs">200 OK</SidecarBox.Footer>
</SidecarBox.Root>

Props

Each part accepts children and an optional className to extend or override its styling.