patterns

DetailPanel

Right-side detail / inspector panel for any entity. Built on Sheet — opens over the page, lets the user keep their list context. Inline-editable title by default; pass `titleReadOnly` to render a static heading.

Install

Pull this component (and its dependencies) straight into your app via the shadcn CLI:

npx shadcn@latest add https://design.oapps.io/r/detail-panel.json

Or import from the workspace package:

import { DetailPanel } from "@8maverik8/design";

Examples

Editable title with eyebrow

const [open, setOpen] = useState(false);
const [title, setTitle] = useState("Pegasus production");

<DetailPanel
  open={open}
  onClose={() => setOpen(false)}
  title={title}
  onTitleChange={setTitle}
  eyebrow="On Gatekeeper · eu-west-1"
>
  <PanelSectionHeading>Configuration</PanelSectionHeading>
  …
</DetailPanel>

Anatomy

title / onTitleChangeEditable title (Input chrome). Bind to your state.
titleReadOnlySwitch the title to a plain h2.
eyebrowMono-caps line above the title — typically the parent context ("On Gatekeeper · eu-west-1").
headerContentChip row / status badges below the title.
footerContentBottom action bar — typically Save/Cancel buttons.

Guidelines

Use this for any "open the row → see details on the right" pattern.
Open a DetailPanel from inside another DetailPanel.Stacked sheets confuse focus and Esc handling.
Use `<PanelSectionHeading>` for sections inside the body — that's the canonical heading size for panels.