ui/components/panel

Panel

Card-like container with composable header, title, description, content, row, and footer primitives.

Preview

tsx

1 import { Panel } from "@/components/ui/panel";2 3 export default function PanelDefault() {4   return (5     <Panel>6       <Panel.Header>7         <Panel.Title>Repository</Panel.Title>8         <Panel.Description>diffgazer-workspace · last synced 4 minutes ago</Panel.Description>9       </Panel.Header>10       <Panel.Content spacing="none">11         <Panel.Row label="Branch" value="main" />12         <Panel.Row label="Commit" value="a1b2c3d" />13         <Panel.Row label="Author" value="developer@example.com" />14       </Panel.Content>15     </Panel>16   );17 }18

Installation

$pnpm exec dgadd add ui/panel

[Installs to]src/components/ui/panel[Item]ui/panel

dgadd is not public on npm yet. Until the first release, pack @diffgazer/add from the repository and install that tarball into this app, which is what puts dgadd on pnpm exec.

UI components require Tailwind CSS v4. Local copy mode imports src/styles/styles.css; package mode uses @diffgazer/ui CSS once packages are available.

Usage

tsx

1 import { Panel } from "@/components/ui/panel";2 3 export default function PanelDefault() {4   return (5     <Panel>6       <Panel.Header>7         <Panel.Title>Repository</Panel.Title>8         <Panel.Description>diffgazer-workspace · last synced 4 minutes ago</Panel.Description>9       </Panel.Header>10       <Panel.Content spacing="none">11         <Panel.Row label="Branch" value="main" />12         <Panel.Row label="Commit" value="a1b2c3d" />13         <Panel.Row label="Author" value="developer@example.com" />14       </Panel.Content>15     </Panel>16   );17 }18

Examples

Composed

Preview

tsx

1 import { Badge } from "@/components/ui/badge";2 import { Button } from "@/components/ui/button";3 import { Panel } from "@/components/ui/panel";4 5 export default function PanelComposed() {6   return (7     <Panel>8       <Panel.Header>9         <Panel.Title>Repository</Panel.Title>10         <Panel.Description>diffgazer-workspace · last synced 4 minutes ago</Panel.Description>11         <span className="text-2xs font-bold uppercase tracking-widest text-muted-foreground">12           MAIN13         </span>14         <Button variant="ghost" size="sm">15           Open16         </Button>17       </Panel.Header>18       <Panel.Content spacing="none">19         <Panel.Row label="Branch" value="main" />20         <Panel.Row label="Commit" value="a1b2c3d" />21         <Panel.Row label="Author" value="developer@example.com" />22         <Panel.Row label="Files changed" value={<Badge variant="success">7 OK</Badge>} />23       </Panel.Content>24       <Panel.Footer>25         <span>Repository health</span>26         <Badge variant="success">stable</Badge>27       </Panel.Footer>28     </Panel>29   );30 }31

Frames

Preview

tsx

1 import { Panel } from "@/components/ui/panel";2 3 export default function PanelFrames() {4   return (5     <div className="flex flex-col gap-6">6       <Panel frame="hairline">7         <Panel.Header>8           <Panel.Title>Hairline (default)</Panel.Title>9           <Panel.Description>Soft border with foreground marker bar.</Panel.Description>10         </Panel.Header>11         <Panel.Content>12           <Panel.Row label="Frame" value="hairline" />13         </Panel.Content>14       </Panel>15 16       <Panel frame="rail">17         <Panel.Header>18           <Panel.Title>Rail</Panel.Title>19           <Panel.Description>Inline-start rail. Lightest chrome.</Panel.Description>20         </Panel.Header>21         <Panel.Content>22           <Panel.Row label="Frame" value="rail" />23         </Panel.Content>24       </Panel>25 26       <Panel frame="viewfinder">27         <Panel.Header>28           <Panel.Title>Viewfinder</Panel.Title>29           <Panel.Description>30             Four corner brackets — 12px arms, 1px stroke, seated on the border.31           </Panel.Description>32         </Panel.Header>33         <Panel.Content>34           <Panel.Row label="Frame" value="viewfinder" />35         </Panel.Content>36       </Panel>37 38       <Panel frame="surface">39         <Panel.Header>40           <Panel.Title>Surface</Panel.Title>41           <Panel.Description>42             Linear-style elevated surface with inner top highlight.43           </Panel.Description>44         </Panel.Header>45         <Panel.Content>46           <Panel.Row label="Frame" value="surface" />47         </Panel.Content>48       </Panel>49     </div>50   );51 }52

Tones

Preview

tsx

1 import { Panel } from "@/components/ui/panel";2 3 export default function PanelTones() {4   return (5     <div className="flex flex-col gap-6">6       <Panel tone="info">7         <Panel.Header>8           <Panel.Title>Info tone</Panel.Title>9           <Panel.Description>Border tinted with --info-border.</Panel.Description>10         </Panel.Header>11         <Panel.Content>12           <Panel.Row label="Status" value="informational" />13         </Panel.Content>14       </Panel>15 16       <Panel tone="warning">17         <Panel.Header>18           <Panel.Title>Warning tone</Panel.Title>19           <Panel.Description>Subtle visual flag — no role, no announcement.</Panel.Description>20         </Panel.Header>21         <Panel.Content>22           <Panel.Row label="Last sync" value="14d ago" />23         </Panel.Content>24       </Panel>25 26       <Panel tone="error">27         <Panel.Header>28           <Panel.Title>Error tone</Panel.Title>29           <Panel.Description>30             For real alerts (icon, role=alert, dismissable), use Callout.31           </Panel.Description>32         </Panel.Header>33         <Panel.Content>34           <Panel.Row label="Failures" value="3" />35         </Panel.Content>36       </Panel>37 38       <Panel tone="accent">39         <Panel.Header>40           <Panel.Title>Accent tone</Panel.Title>41           <Panel.Description>For featured / pinned cards.</Panel.Description>42         </Panel.Header>43         <Panel.Content>44           <Panel.Row label="Pinned" value="yes" />45         </Panel.Content>46       </Panel>47     </div>48   );49 }50

Focused

Preview

tsx

1 import { Panel } from "@/components/ui/panel";2 3 export default function PanelFocused() {4   return (5     <div className="grid gap-6 sm:grid-cols-2">6       <Panel>7         <Panel.Header>8           <Panel.Title as="h3">Resting</Panel.Title>9           <Panel.Description>Inactive pane. Frame chrome only.</Panel.Description>10         </Panel.Header>11         <Panel.Content spacing="none">12           <Panel.Row label="Branch" value="main" />13           <Panel.Row label="Commit" value="a1b2c3d" />14         </Panel.Content>15       </Panel>16 17       <Panel focused>18         <Panel.Header>19           <Panel.Title as="h3">Focused</Panel.Title>20           <Panel.Description>Active pane. Corner brackets in --ring.</Panel.Description>21         </Panel.Header>22         <Panel.Content spacing="none">23           <Panel.Row label="Branch" value="main" />24           <Panel.Row label="Commit" value="a1b2c3d" />25         </Panel.Content>26       </Panel>27 28       <Panel frame="viewfinder">29         <Panel.Header>30           <Panel.Title as="h3">Viewfinder resting</Panel.Title>31           <Panel.Description>12px arms, 1px stroke, in --foreground.</Panel.Description>32         </Panel.Header>33         <Panel.Content spacing="none">34           <Panel.Row label="Frame" value="viewfinder" />35         </Panel.Content>36       </Panel>37 38       <Panel frame="viewfinder" focused>39         <Panel.Header>40           <Panel.Title as="h3">Viewfinder focused</Panel.Title>41           <Panel.Description>42             Same 12px arms and 1px stroke, in --ring; the perimeter firms to --border-strong.43           </Panel.Description>44         </Panel.Header>45         <Panel.Content spacing="none">46           <Panel.Row label="Frame" value="viewfinder" />47         </Panel.Content>48       </Panel>49     </div>50   );51 }52

Corner labels

Preview

tsx

1 import { Panel } from "@/components/ui/panel";2 3 export default function PanelReadout() {4   return (5     <div className="grid gap-8 sm:grid-cols-2">6       <Panel frame="viewfinder">7         <Panel.Label variant="readout">SETUP · 02/06 · PROVIDER</Panel.Label>8         <Panel.Content>9           <Panel.Row label="Provider" value="anthropic" />10         </Panel.Content>11       </Panel>12 13       <Panel frame="viewfinder" focused>14         <Panel.Label variant="readout">SETUP · 03/06 · API KEY</Panel.Label>15         <Panel.Content>16           <Panel.Row label="Key" value="sk-…f21a" />17         </Panel.Content>18       </Panel>19 20       <Panel>21         <Panel.Label>[ 01 / FS_TREE ]</Panel.Label>22         <Panel.Content>23           <Panel.Row label="Variant" value="border" />24         </Panel.Content>25       </Panel>26 27       <Panel>28         <Panel.Label variant="gap">[ 02 / DIFF ]</Panel.Label>29         <Panel.Content>30           <Panel.Row label="Variant" value="gap" />31         </Panel.Content>32       </Panel>33     </div>34   );35 }36

API Reference

Panel

Name	Type	Default	Description
as	"div" \| "article" \| "section" \| "aside"	"div" (or "section" when a statically discoverable Title or explicit ARIA name is present)	Rendered HTML element. Defaults to <section> when a Panel.Title is statically discoverable or an explicit ARIA name is supplied, otherwise <div>.
frame	"hairline" \| "rail" \| "viewfinder" \| "surface"	"hairline"	Visual chrome. Hairline = soft border + marker bar; rail = inline-start rail only; viewfinder = corner brackets; surface = elevated --surface-1 background.
tone	"info" \| "success" \| "warning" \| "error" \| "accent"	undefined	Border-color tint. Visual cue only — no semantic role, no live announcement. Use Callout for real status messaging.
density	"default" \| "compact"	"default"	Padding rhythm. Default = 14/20; compact = 10/14.
focused	boolean	false	Marks the panel as the active pane: corner brackets render in --ring on every frame, at the geometry the viewfinder frame already rests at, and a framed perimeter firms to --border-strong — only the brackets carry --ring. Visual affordance only — it does not move focus or change ARIA.
children	ReactNode	—	Panel subparts.

PanelHeader

Name	Type	Default	Description
marker	"bar" \| "none"	"bar"	Toggle the 4px foreground marker bar. Use "none" for rail or custom layouts.
children	ReactNode	—	Title and Description go in a left column; any other child lands in a right slot.

PanelTitle

Name	Type	Default	Description
as	"h2" \| "h3" \| "h4" \| "h5" \| "h6"	"h2"	Heading level. Defaults to h2, matching Dialog.
children	ReactNode	—	Title text.

PanelDescription

Name	Type	Default	Description
children	ReactNode	—	Short description paragraph below the title.

PanelContent

Name	Type	Default	Description
spacing	"none" \| "sm" \| "md"	"md"	Vertical gap applied between direct children inside the content area. Use spacing="none" when composing Panel.Row (rows own their own padding).
children	ReactNode	—	Body content.

PanelRow

Name	Type	Default	Description
labelrequired	ReactNode	—	Row label (renders left-aligned, muted).
valuerequired	ReactNode	—	Row value (renders right-aligned, foreground).

PanelFooter

Name	Type	Default	Description
children	ReactNode	—	Footer metadata or actions.

PanelLabel

Name	Type	Default	Description
variant	"border" \| "gap" \| "readout"	"border"	Label treatment. "border" boxes the text, "gap" cuts it into the frame, "readout" seats it on the top rule between the bracket arms and repaints in --ring while the pane is focused.
children	ReactNode	—	Label text (e.g. [ 01 / FS_TREE ]).

Accessibility

Notes

Frames

Pick one frame via the `frame` prop: hairline (default soft border + marker bar), rail (inline-start rail drawn in --border-strong so it reads as a deliberate frame rather than a stray divider), viewfinder (four corner brackets), surface (--surface-1 background with a hairline perimeter and a 1px inner top lip in --surface-1-highlight — the fill steps lighter in dark and darker in light, and the lip is what keeps both directions reading as raised). Frame is purely visual chrome and applies independently of tone and density.

Component tokens

The perimeter paints `--panel-border-color`, whose default chain is `--panel-border` → `--panel-hairline` → a 60% `--border` mix. Set `--panel-border` on the panel or any ancestor (defaults resolve through var() fallbacks, so ancestor scoping reaches them) to lift the enclosure to a full-strength border while header, footer, and row hairlines stay on `--panel-hairline` — that split is what keeps the nesting ladder (panel enclosure → inner card → row hairline) readable. `--panel-border-color` itself is internal: `focused` repoints it at `--border-strong` on the hairline and surface frames (rail draws its own `--border-strong` edge, viewfinder has no border), and descendants inherit it, which is how a Panel.Label chip edge tracks the perimeter in every state without restating the chain. The other consumer tokens are `--panel-bg` (default `--background`), `--panel-fg` (default `--foreground`), `--panel-hairline`, and `--panel-tone` (the header marker bar, which `tone` overrides). Bracket geometry rides `--viewfinder-size` (12px), `--viewfinder-weight` (1px), `--viewfinder-color`, and `--viewfinder-offset` (-1px, seating the arm on the border line).

Tone

`tone` is a pure visual border-color tint (info, success, warning, error, accent). No icon slot, no announce, no role machinery. For status messaging with icons, live regions, dismissable, or role=alert, use Callout instead.

Density

`density="default"` uses 14/20 padding rhythm; `density="compact"` uses 10/14. Header, Content, and Footer read padding from the root's data-density attribute via panel/panel.css.

Header marker

`PanelHeader marker="bar"` (default) renders a 4px foreground bar to the left of Title/Description. Set `marker="none"` for rail/custom layouts where the bar would clash.

Accessibility

A statically discoverable Panel.Title makes the initial root a <section> and auto-wires aria-labelledby; Panel.Description similarly auto-wires aria-describedby. React cannot inspect content created inside an opaque child component during SSR. For that shape, assign stable ids to the generated title and description and pass those ids to root aria-labelledby/aria-describedby. An explicit ARIA name still makes the default root a <section>. With no discoverable title or explicit name, the root stays a plain <div> (no nameless landmark).

Eyebrow tags

There is no Title `meta` prop on Panel (unlike Dialog) because the header has a right-slot for actions. Compose eyebrow tags (e.g. "MAIN", "PROD") as plain siblings inside PanelHeader; they land in the right slot, vertically centered next to action buttons.

Corner labels

Use Panel.Label variant='border' for a tab chip seated on the panel border, variant='gap' for a border cutout label, or variant='readout' to seat the label on the panel's top rule between the two bracket arms (no box — the arms are the frame). The border chip recipe is fixed: 11px bold uppercase at 0.1em tracking in --muted-foreground, a --surface-2 fill, and a 1px border reading the panel's own --panel-border-color, so the chip edge matches the enclosure while resting and while focused. The inline-start inset is constant at 1rem: a bracket arm is the same 12px whether the panel is resting or focused, so one inset clears it in every state and the label never moves when focus arrives. The readout still sits just past the arm and repaints in --ring while the pane is focused, so label and corners read as one instrument. Every label publishes data-variant and data-state='focused'; consumers do not hand-roll those offsets.

Focused pane

`focused` marks the panel as the active pane in a multi-pane layout: corner brackets appear on any frame drawn in --ring, at the same 12px/1px geometry the viewfinder frame rests at (seated on the border line), and a hairline or surface perimeter firms to --border-strong with them. It emits data-state="focused" and shifts no size — no padding, bracket-length, or shadow change — so toggling it never reflows the layout. It is a visual affordance only: it does not move DOM focus and does not change roles, names, or ARIA. Drive it from whatever pane-focus state the app already owns, and keep a real focus-visible outline on the interactive elements inside.

Reticle grammar

The corner brackets are a signature, not decoration, and they mean one thing: this is the pane the keyboard drives. Four rules, stated as prohibitions because those are the ones that get broken. (1) A panel that cannot receive keyboard focus must not use frame="viewfinder" and must not pass `focused`. (2) A screen renders at most one panel with data-state="focused" at any time — in full-screen tests, assert that the selector [data-slot="panel"][data-state="focused"] matches exactly one element. (3) frame="viewfinder" without `focused` is reserved for surfaces where the reticle is the subject rather than the chrome, such as a marketing hero lens; on product screens the reticle always means focus. (4) Geometry never encodes state: resting and focused brackets are both 12px arms at 1px stroke centered on the border line, and focus changes color only (--foreground → --ring, while a hairline or surface perimeter firms to --border-strong). A bracket thickened or lengthened to mean "focused" is out of grammar.

Source

Install via CLI: pnpm exec dgadd add ui/panel.

Highlighted source loads after this disclosure opens. Browse the source repository.

Panel

Installation

Usage

Examples

Composed

Frames

Tones

Focused

Corner labels

API Reference

Panel

PanelHeader

PanelTitle

PanelDescription

PanelContent

PanelRow

PanelFooter

PanelLabel

Accessibility

Notes

Frames

Component tokens

Tone

Density

Header marker

Accessibility

Eyebrow tags

Corner labels

Focused pane

Reticle grammar

Source

View component source (17 files)