Panel

A neutral, full-height layout region. Where DetailPanel is the specific right-hand record panel, Panel is the generic building block for a column or pane — a workspace rail, a list column, a document view — with optional header, scrolling body and footer parts. It composes with Resizable to build split layouts.

Sessions

The body region grows to fill the panel and scrolls on overflow, so the header and footer stay pinned.

Drop a list, a form, or a document here.

<Panel>  <PanelHeader>    <PanelTitle>Sessions</PanelTitle>    <Badge tone="neutral">12</Badge>  </PanelHeader>  <PanelBody className="p-3">    <Text variant="body-sm" tone="secondary">Panel body scrolls on overflow.</Text>  </PanelBody>  <PanelFooter>    <Button variant="ghost" size="sm"><Plus className="size-3.5" /> New session</Button>  </PanelFooter></Panel>

Parts

Prop	Type	Default	Notes
`Panel`	`container`	—	Full-height flex column on the page surface. Give it a width via a parent or ResizablePanel.
`PanelHeader`	`element`	—	Fixed header row with a hairline underline; holds a title and actions.
`PanelTitle`	`element`	—	The heading. Renders an <h2>; truncates on overflow.
`PanelBody`	`element`	—	Scrolling content region that grows to fill.
`PanelFooter`	`element`	—	Pinned footer for secondary actions or status.