Panel
Bordered card with header/actions/footer.
Router Load
LIVE · 14:32:07 UTCLIVE
Active experts
9
Context window
71.4%
Rejected
12
LAST SYNC 2S AGO · 9 EXPERTS ONLINE
Source
"use client"
import { Badge } from "@/registry/warren/badge/badge"
import { Panel } from "@/registry/warren/panel/panel"
import { Stat } from "@/registry/warren/stat/stat"
export default function PanelDemo() {
return (
<Panel
title="Router Load"
subtitle="LIVE · 14:32:07 UTC"
actions={<Badge variant="live" dot>LIVE</Badge>}
footer="LAST SYNC 2S AGO · 9 EXPERTS ONLINE"
>
<div className="flex divide-x divide-border">
<Stat label="Active experts" value="9" tone="primary" className="flex-1 pr-3" />
<Stat label="Context window" value="71.4%" tone="success" className="flex-1 px-3" />
<Stat label="Rejected" value="12" tone="danger" className="flex-1 pl-3" />
</div>
</Panel>
)
}
Installation
npx shadcn@latest add https://warren.eduard3v.com/r/panel.jsonUsage
import { Panel } from "@/components/ui/panel"<Panel
title="Router Load"
subtitle="LIVE · 14:32:07 UTC"
actions={<Badge variant="live" dot>LIVE</Badge>}
footer="Last sync 2s ago"
>
<Stat label="Active experts" value="9" tone="primary" />
</Panel>Header & Actions
The header row carries the mono bold uppercase title on the left with an optional 10px slate
subtitle beside it; actions (badges, buttons, stats) sit right-aligned. There is no divider
under the header. Pass headingLevel (1 | 2 | 3, default 2) to set the semantic level of the
title heading — use 2 inside a page <h1>, 3 when the panel nests under another heading.
Footer
An optional footer renders as a 1px top hairline strip with a 10px uppercase mono line.
Sync Status
EMPTY BODY · FOOTER ONLYALL SYSTEMS NOMINAL · 0 PENDING SYNCS
Source
"use client"
import { Panel } from "@/registry/warren/panel/panel"
export default function PanelFooter() {
return (
<Panel
title="Sync Status"
subtitle="EMPTY BODY · FOOTER ONLY"
footer="ALL SYSTEMS NOMINAL · 0 PENDING SYNCS"
/>
)
}
API Reference
Prop
Type