Panels
A Panel is Reshape's read-only detail view — a bordered list of label/value rows for displaying a record, as opposed to editing one. If Forms are for input and Tables are for lists, Panels are for the "show" screen in between.
Structure
web/src/components/ui/panel/ — Panel is the container; PanelItem renders each bordered row (a responsive label / value grid); PanelLabel/PanelValue are the individual pieces if you need to compose a row by hand. Most of the time you won't reach for those directly — you'll use one of the typed field components below instead.
Every field accepts a copyable prop — pass it a string and a copy-to-clipboard button appears next to the value. When the underlying value is null, fields render an em-dash (components/emdash.vue) instead of leaving a blank row, so panels never look broken when data is missing.
Field Types
Reshape ships with a variety of panel field components (components/ui/panel/fields/):
Panel Field
PanelField : label?, copyable?, class?, labelClass?, valueClass?The generic escape hatch when nothing else fits — pass a label and put whatever you need in the default slot (e.g. a status badge component instead of plain text).
Text Field
TextField : label?, value, copyable?Boolean Field
BooleanField : label?, value, copyable?Renders a yes/no indicator.
Date Field
DateField : label?, value, copyable?Date Time Field
DateTimeField : label?, value, copyable?Url Field
UrlField : label?, value, text?, copyable?Renders a clickable link.
Color Field
ColorField : label?, value, copyable?Renders a color swatch.
Code Field
CodeField : label?, value, copyable?Monospace, for identifiers and raw values.
Excerpt Field
ExcerptField : label?, value, limit? (default 160), copyable?Truncated long text.
Image Field
ImageField : label?, value, alt?, copyable?, class?Renders a thumbnail.
Country Field
CountryField : label?, code, name, copyable?Timezone Field
TimezoneField : label?, name, copyable?Industry Field
IndustryField : label?, name, description?, copyable?Type Field
TypeField : label?, name, description?, copyable?Related patterns
Panels sit alongside a few sibling components worth knowing about when you're building a detail page: components/ui/card/* for the surrounding layout, components/ui/dialog/* and the shared confirm-dialog.vue for confirmations, and components/ui/sheet/* for slide-over panels — none of which are "Panel" in the sense of this page, despite the similar name. See the Customers detail page for a full working example combining a Panel with an actions card.