Panel Header

Titles a dashboard panel and holds the actions that belong to it.

Configurations

Supported configurations for this component.

2 examples

Title only

With actions

One command adds this component to your project.

Run the following command. New project? Run npx shadcn@latest init first to set up Tailwind and path aliases.

npx shadcn@latest add @aicanvas/••••••••••••

Light and dark both come with the install and follow the dark class on <html>, the shadcn dark mode setup (next-themes with attribute="class").

Every prop this component accepts. Any other prop is forwarded to the underlying element.

Prop	Type	Default	Description
titlereq	`React.ReactNode`	-	Sentence-case title.
titleAs	`'h2'\|'h3'\|'h4'\|'h5'\|'h6'\|'span'`	'h3'	Element the title renders as. A heading by default so the panel shows up in the page outline; pick the level that fits your page, or `span` for no heading. The look does not change.
actions	`React.ReactNode`	-	Right-aligned slot (PanelMenu, IconButton, Button, etc.).
size	`'sm'\|'md'\|'lg'`	'md'	Header weight: title type + padding. The actions child keeps its OWN size prop (the header never forces it), so pair them by name: sm header + `size="sm"` control (28px), md + `md` (32px), lg + `lg` (40px). A mismatched pair is legal and occasionally right (a dense sm kebab on an md header), just make it deliberate.
divider	`boolean`	true	Hairline under the header, inset 12px from each edge. On by default. Turn it off where the surface below brings its own edge — a map, a chart canvas, a full-bleed media panel — so the header does not draw a second line a few pixels from the first.
className	`string`	-	Additional CSS classes applied to the root element.
style	`React.CSSProperties`	-	Inline styles applied to the root element.

Collects a panel's secondary actions behind a kebab trigger.

Shows a payment card as the card itself, with its name, last four digits and expiry, and tilts toward the pointer.

Renders a slowly rotating particle sphere as a hero object.