Panel header

The strip at the top of a panel: icon, title, count, status and actions in one row the height of a control, with an optional fold toggle.

npx prodular-ui add panel-header

Panel headers

With a count, live status and actions, and inside a Collapsible with a fold toggle.

Signals

128Live

Panel body

Notes

Three notes from the last shift.

import { ListFilterIcon, MoreHorizontalIcon, RadarIcon } from "lucide-react"
import { Button } from "@/components/ui/button"import { Collapsible, CollapsibleContent } from "@/components/ui/collapsible"import {  PanelHeader,  PanelHeaderActions,  PanelHeaderCount,  PanelHeaderIcon,  PanelHeaderStatus,  PanelHeaderTitle,  PanelHeaderToggle,} from "@/components/ui/panel-header"import { Status } from "@/components/ui/status"
export default function PanelHeaderVariants() {  return (    <div className="flex w-full max-w-sm flex-col gap-4">      <div className="rounded-lg border bg-card">        <PanelHeader>          <PanelHeaderIcon>            <RadarIcon />          </PanelHeaderIcon>          <PanelHeaderTitle>Signals</PanelHeaderTitle>          <PanelHeaderCount aria-label="128 signals">128</PanelHeaderCount>          <PanelHeaderStatus>            <Status variant="info" size="xs" pulse>              Live            </Status>          </PanelHeaderStatus>          <PanelHeaderActions>            <Button variant="ghost" size="icon-xs" aria-label="Filter signals">              <ListFilterIcon />            </Button>            <Button variant="ghost" size="icon-xs" aria-label="More actions">              <MoreHorizontalIcon />            </Button>          </PanelHeaderActions>        </PanelHeader>        <div className="p-3 text-(length:--text-ui) text-muted-foreground">Panel body</div>      </div>
      <Collapsible defaultOpen className="rounded-lg border bg-card">        <PanelHeader>          <PanelHeaderToggle label="Toggle notes" />          <PanelHeaderTitle>Notes</PanelHeaderTitle>          <PanelHeaderCount>3</PanelHeaderCount>        </PanelHeader>        <CollapsibleContent>          <div className="p-3 text-(length:--text-ui) text-muted-foreground">Three notes from the last shift.</div>        </CollapsibleContent>      </Collapsible>    </div>  )}

Anatomy

<PanelHeader>  <PanelHeaderIcon><RadarIcon /></PanelHeaderIcon>  <PanelHeaderTitle>Signals</PanelHeaderTitle>  <PanelHeaderCount>128</PanelHeaderCount>  <PanelHeaderActions>    <Button variant="ghost" size="icon-xs" aria-label="Filter"><FilterIcon /></Button>  </PanelHeaderActions></PanelHeader>

Guidance

Use it when

The top of every pane in a Workspace, and of sidebars and inspectors.
PanelHeaderCount for the number of items in the pane.
Icon buttons in PanelHeaderActions for filtering, sorting and more.

Avoid

PanelHeader as a page title. Use PageHeader.
More than three actions. Move the rest into a DropdownMenu.
Long titles. The title truncates; keep it to a word or two.

Rules for AI agents

Published in llms-full.txt, the registry and the MCP server, so coding agents follow them when they build with this component.

Use PanelHeaderTitle with the right level for the outline: 2 under the page title, 3 inside a panel.
Every icon-only action needs aria-label.
Give PanelHeaderCount an aria-label when the number alone is ambiguous, for example "128 signals".
Use PanelHeaderToggle only inside a Collapsible, and pass label.

API

PanelHeader

Prop	Type	Default	Description
bordered	boolean	true	Draws the bottom border.

PanelHeaderTitle

Prop	Type	Default	Description
level	2 \| 3 \| 4	2	Heading level.

PanelHeaderToggle

Prop	Type	Default	Description
label	string	"Toggle panel"	Accessible name of the fold button.

Installation

The Prodular UI CLI adds the source to components/ui with everything it depends on. In a project that already uses shadcn/ui, the shadcn CLI installs it from the Prodular registry too. See Installation for the first setup.

npx prodular-ui add panel-header# or, with the registry in components.jsonnpx shadcn@latest add @prodular/panel-header