Skip to content
Nexus Application Design nadesign

PropertyList

<PropertyList> is the canonical entity-properties layout — icon + label in a fixed left column, value on the right. Use on detail pages, in HoverCardPreview, in Sheet bodies.

import from "@na/ui/components/PropertyList" ▶ Open in Storybook packages/ui/src/components/PropertyList.tsx

When to use

  • Entity detail panes (deal, person, agent, document).
  • HoverCardPreview content — 3–5 key properties.
  • Anywhere a <dl> would be semantically correct.

Don’t use PropertyList for: form fields (SelectRow etc. for those), heterogeneous content (this is property-list-shaped), or large datasets (use DataTable).

Default

Company
Acme Corp
Owner
alice
Created
Apr 2026
Plan
Enterprise
 
<PropertyList>
  <PropertyRow icon={IconBuilding} label="Company">Acme Corp</PropertyRow>
  <PropertyRow icon={IconUser} label="Owner">alice</PropertyRow>
  <PropertyRow icon={IconCalendar} label="Created">Apr 2026</PropertyRow>
  <PropertyRow icon={IconBolt} label="Plan"><Badge>Enterprise</Badge></PropertyRow>
</PropertyList>

API

PropertyList

Prop Type Default Description
children * ReactNode — <PropertyRow>s. The component renders a semantic <dl>.
compact boolean false Tighter vertical spacing for HoverCard / Sheet contexts.
className string — Forwarded.

PropertyRow

Prop Type Default Description
label * string — Property name. Sentence case.
icon ComponentType — Optional icon component (Tabler / Lucide).
children * ReactNode — The property value — text, badge, link, anything.

Design guidelines

✓ Do

  • Cap at ~10 rows in any one PropertyList. Past that, the user can't scan; switch to a tab or "Show more".
  • Use icons for the property type (Building, User, Calendar). Decorative-only icons are noise.
  • Render the value with whatever primitive fits — Badge, link, formatted date, plain text.

✗ Don't

  • Use PropertyList for editable forms. Pair with InlineEditField if individual fields are editable, but the structural layout is still PropertyList.
  • Stack two PropertyLists side-by-side. Use a single list with logical row order.

Accessibility

  • Renders a semantic <dl> + <dt> / <dd> pairs — assistive tech announces the structure.
  • Icons are aria-hidden — the label carries the meaning.

▶ Open PropertyList stories in Storybook