Panel

Layout

Card panel layout for dashboards and admin views. A contained surface with a header, optional divider, and scrollable content area. Suitable for data widgets, kanban columns, or settings sections.

Code Example

<div className="rounded-lg border bg-card shadow-sm">
  <div className="flex items-center justify-between px-5 py-3.5 border-b">
    <h3 className="font-semibold text-sm text-card-foreground">Panel Title</h3>
    <Button size="sm" variant="ghost">Action</Button>
  </div>
  <div className="p-5">
    <p className="text-sm text-muted-foreground">Panel content goes here.</p>
  </div>
</div>

Variants (3)

Default

Bordered card with header, divider, and content area

scrollable= falseelevation= "flat"

Scrollable

Fixed-height panel with overflow-y scroll

scrollable= trueelevation= "flat"

Elevated

Shadow elevation for depth in dense dashboards

scrollable= falseelevation= "elevated"

Guidelines

Do

Use a clear panel title in the header
Add a border or shadow for visual containment
Keep padding consistent inside the panel
Support optional action buttons in the header row

Don't

Nest panels more than 2 levels deep
Use panels as the primary hero on a public-facing page
Omit the panel header when nesting multiple panels
Mix scrollable and non-scrollable panels in the same row

Use Cases

Dashboard KPI widgets
Kanban board columns
Settings panels with grouped options
Side panels in split-layout admin pages

Details

Category: Layout
Reference Component: Panel
Variants: 3
Guidelines: 4 dos, 4 donts

Back to all patterns