Property list
Key-value pairs for inspectors and detail panels on one grid, with empty values, descriptions, monospace values and copy actions.
npx prodular-ui add property-listInvoice inspector
A copyable ID, a status, a described label, badges and an empty value.
- Invoice
- INV-2103
- Status
- Overdue
- CustomerBilling contact
- Kestrel Health
- Amount
- $21,600.00
- Tags
- EnterpriseNet 30
- PO number
- Not set
import { Badge } from "@/components/ui/badge"import { Property, PropertyLabel, PropertyList, PropertyValue } from "@/components/ui/property-list"import { Status } from "@/components/ui/status"
export default function PropertyListInspector() { return ( <div className="w-full max-w-sm rounded-lg border bg-card px-4 py-2"> <PropertyList> <Property> <PropertyLabel>Invoice</PropertyLabel> <PropertyValue mono copy copyLabel="Copy invoice number"> INV-2103 </PropertyValue> </Property> <Property> <PropertyLabel>Status</PropertyLabel> <PropertyValue> <Status variant="destructive" size="sm"> Overdue </Status> </PropertyValue> </Property> <Property> <PropertyLabel description="Billing contact">Customer</PropertyLabel> <PropertyValue>Kestrel Health</PropertyValue> </Property> <Property> <PropertyLabel>Amount</PropertyLabel> <PropertyValue className="tabular-nums">$21,600.00</PropertyValue> </Property> <Property> <PropertyLabel>Tags</PropertyLabel> <PropertyValue className="flex-wrap"> <Badge variant="secondary" size="sm"> Enterprise </Badge> <Badge variant="secondary" size="sm"> Net 30 </Badge> </PropertyValue> </Property> <Property> <PropertyLabel>PO number</PropertyLabel> <PropertyValue /> </Property> </PropertyList> </div> )}Anatomy
<PropertyList> <Property> <PropertyLabel>Invoice</PropertyLabel> <PropertyValue mono copy copyLabel="Copy invoice number">INV-2103</PropertyValue> </Property></PropertyList>Guidance
Use it when
- The fields of one record in an inspector, a side panel or a detail card.
- copy on identifiers people paste elsewhere: IDs, hashes, coordinates.
- mono for IDs and coordinates.
Avoid
- Editable forms. Use Field and the inputs, or InlineEdit per value.
- Comparing many records. Use Table.
- Writing a dash or an empty cell for missing values. The empty text does that.
Rules for AI agents
Published in llms-full.txt, the registry and the MCP server, so coding agents follow them when they build with this component.
- Wrap each pair in Property with one PropertyLabel and one PropertyValue.
- Leave PropertyValue empty for missing data; do not write placeholders like "-" or "N/A".
- Pass copyLabel naming what is copied, for example "Copy invoice number".
- Set labelWidth so the longest common label fits; it truncates beyond that.
API
PropertyList
| Prop | Type | Default | Description |
|---|---|---|---|
| labelWidth | string | "8rem" | Width of the label column. |
PropertyLabel
| Prop | Type | Default | Description |
|---|---|---|---|
| description | ReactNode | A second line under the label in tertiary text. |
PropertyValue
| Prop | Type | Default | Description |
|---|---|---|---|
| empty | ReactNode | "Not set" | Shown when there is no value. |
| copy | boolean | string | Adds a copy button. A string copies that string. | |
| copyLabel | string | "Copy" | Accessible name of the copy button. |
| mono | boolean | false | Monospace value. |
Installation
The Prodular UI CLI adds the source to components/ui with everything it depends on. In a project that already uses shadcn/ui, the shadcn CLI installs it from the Prodular registry too. See Installation for the first setup.
npx prodular-ui add property-list# or, with the registry in components.jsonnpx shadcn@latest add @prodular/property-list