Property List

Install

pnpm dlx shadcn@latest add @vegastack/property-list

Usage

import {
  PropertyLabel,
  PropertyList,
  PropertyRow,
  PropertyValue,
} from "@/components/ui/property-list";
import { EmptyValue } from "@/components/ui/empty";

<PropertyList aria-label="Record details">
  <PropertyRow>
    <PropertyLabel icon={<Globe />}>Domains</PropertyLabel>
    <PropertyValue>
      <a href="…">attio.com</a>
    </PropertyValue>
  </PropertyRow>
  <PropertyRow>
    <PropertyLabel icon={<Users />}>Team</PropertyLabel>
    <PropertyValue>
      <EmptyValue>Set a value…</EmptyValue>
    </PropertyValue>
  </PropertyRow>
</PropertyList>;

Anatomy

A <dl> of <dt>(label)/<dd>(value) pairs. The list is a named container (@container/property-list), and the row layout follows the PANE's width rather than the viewport's — the same facts pane is as often a narrow sidebar on a wide screen as a wide column on a narrow one:

• At @xs and up — two tracks. The label track shrinks to its content above an 80px floor (minmax(calc(var(--spacing) * 20), max-content)), so short labels stop wasting the value column's width and long ones are no longer clipped by a track that never negotiated with them.
• Below @xs — the row stacks, and the value gets the full width instead of a sliver.

Values wrap; they do not truncate. A value is the point of its row, and the overflow: hidden that truncation implies also clipped the focus ring of any link inside it. Compose TruncatedText explicitly where a single line is genuinely required. Values are compositions: plain text, a link, a TagGroup, or an EmptyValue for the faint "Set a value…" slot.

Semantics

The definition list announces each label→value relationship natively. Label icons are decorative (aria-hidden); keep the text label present — never an icon-only <dt>.

PropertyList vs DataList vs SettingsRow

Anatomy

Property List is a compound component. Every exported part, with the data-slot it renders (generated from the canonical source):

Examples

Compose plain values, links, empty values, and tag groups in the same aligned definition list. Long values wrap onto as many lines as they need; the label track sizes itself to the longest label above its 80px floor.

Narrow panes

In a narrow record pane the value column truncates rather than widening the list, and an unset property renders an EmptyValue — an honest "nothing here yet" affordance instead of a blank row a reader has to interpret.

API Reference

PropertyList

PropertyList accepts native <dl> props and forwards its ref to the definition list.

PropertyRow

PropertyRow accepts native <div> props and groups one <dt>/<dd> pair.

PropertyLabel

PropertyValue

PropertyValue accepts native <dd> props and forwards its ref to the value cell.

Accessibility

• Native <dl>, <dt>, and <dd> semantics expose each label/value relationship.
• Label icons are decorative; always keep a visible text label.
• Links and controls inside values keep their native keyboard behavior and focus indicator.
• Source order remains label then value in both LTR and RTL layouts.
• Values do not clip their overflow, so a link inside one keeps its full focus outline.

Do / Don't