Panel

A bordered surface container with an optional header row.

OverviewLive

Frame content with a hairline border and an optional header row.

Installation

Add the panel component with the shadcn CLI.

bash

npx shadcn@latest add https://swiss.ui.unsanity.ai/r/panel.json

Usage

tsx

import { Panel } from "@/components/ui/panel"

Examples

With actions

PanelHeader holds a title and controls

Settings

Panel body.

import { Button } from "@/components/ui/button"
import { Panel, PanelHeader } from "@/components/ui/panel"

<Panel className="w-80">
  <PanelHeader>
    <span className="label">Settings</span>
    <Button size="sm" variant="outline">Edit</Button>
  </PanelHeader>
  <div className="p-4 text-sm text-muted-foreground sm:p-6">Panel body.</div>
</Panel>

Content only

No header

A panel can be a plain bordered surface.

import { Panel } from "@/components/ui/panel"

<Panel className="w-80 p-4 text-sm text-muted-foreground sm:p-6">
  A panel can be a plain bordered surface.
</Panel>