Data

Panel

Labeled dashboard surface — eyebrow, optional aside, free-form data body.

Preview

components/data/Panel.jsx

Allocation vs targets

tick = target

Cash / Deposits83.9% → 40%

Gold3.8% → 12%

The labeled surface every dashboard view composes on. Never nest a bordered box directly inside — use hairline row dividers instead.

Usage

src/components/ui/Panel.tsx

tsx

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

<Panel label="Allocation vs targets" aside="state-3 targets · tick = target">
  …TrackBars, DataTable rows, charts…
</Panel>

API

props

Prop	Type	Default	Description
label	ReactNode	—	Uppercase eyebrow naming the panel.
aside	ReactNode	—	Right-aligned context — provenance, counts.
children	ReactNode	—	Free-form data body.

Tokens consumed

semantic only

--color-bg-elevated--color-border--color-fg-subtle--text-2xs--font-sans