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.
className	`string`	-	Additional CSS classes applied to the root element.
style	`React.CSSProperties`	-	Inline styles applied to the root element.

Displays a status message in the flow of the page, at a severity from note to fault.

Represents a person as a square image tile that falls back to their initials.

Displays the state a row or cell reports, such as online, queued, or fault.