/// Layout
Panel
A dense bordered console surface with an optional labelled header row and hairline-divided sub-sections.
import { Panel } from "@protocore/pds";Basics
A Panel is a hairline-bordered surface. Give it a label for a mono uppercase header row over a bottom hairline, and put content in the body.
height ....... 8,241,003
peers ........ 1,284
version ...... v2.4.1
Sections and actions
Pin controls to the header via actions, and divide the body into labelled Panel.Sections — consecutive sections separate with a hairline.
registry.protocore.io/relay:2.4.1
2 vCPU · 4 GiB · eu-central-1
When to use it
Panel is the console surface: dense, bordered, mono-labelled, radius-0 — for operator UIs, config readouts, and dashboards where information density matters more than warmth. Reach for Card instead on marketing and content surfaces, where the tone is softer and the header carries a sans title/subtitle. Panel's header is a mono uppercase micro-label plus an actions slot; Card's is a titled block. Use Panel.Section to carve the body into labelled bands rather than dropping in bare Dividers — the sections handle the seams for you.
Usage
Do
- Use Panel for operator and console surfaces where density is the point.
- Split the body into Panel.Sections rather than hand-placing dividers.
- Keep the label a short mono uppercase micro-heading.
Don't
- Use Panel where a warmer Card is the right register (marketing, content).
- Add manual Dividers between Panel.Sections — they already separate.
- Put long sans prose in a Panel; its idiom is dense, mono, tabular.
Accessibility
- Renders a `<section>`; its header label is visible text, not an accessible name — add `aria-label`/`aria-labelledby` if the region should be a named landmark.
- Actions in the header are ordinary controls and follow normal focus order.
Panel props
| Prop | Type | Default | Description |
|---|---|---|---|
actions | ReactNode | — | Actions slot pinned to the right of the header row (e.g. buttons). |
children | ReactNode | — | Panel body content. |
className | string | — | |
label | ReactNode | — | Optional mono UPPERCASE label rendered in the header row over a bottom hairline. |
style | CSSProperties | — |