Key-Value List

Basic

Four-up facts panel

The canonical "key facts" row atop a detail page. Each value is an arbitrary node — drop in a Badge, AvatarStack, StatHero, or ScoreIndicator.

Horizontal inspector

orientation="horizontal" places the label beside the value — ideal for a tighter inspector or sidebar.

Installation

npx visor add key-value-list

This copies two files into your project:

• components/ui/key-value-list/key-value-list.tsx — the component
• components/ui/key-value-list/key-value-list.module.css — the styles

Usage

import { KeyValueList } from '@/components/ui/key-value-list/key-value-list';
import { Badge } from '@/components/ui/badge';

export default function OrgFacts({ org, members }) {
  return (
    <KeyValueList
      columns={4}
      items={[
        { label: 'Plan', value: <Badge tone="info">{org.plan}</Badge> },
        { label: 'Members', value: members.length, hint: 'total' },
        { label: 'Monthly revenue', value: formatCurrency(org.monthlyRevenue) },
        { label: 'Health score', value: org.healthScore, hint: '/ 100' },
      ]}
    />
  );
}

API Reference

KeyValueListProps

No props data available for “key-value-list”.

Each entry in items is a KeyValueItem: { label: ReactNode; value: ReactNode; hint?: ReactNode }. The component also accepts all standard HTML attributes for the root element (defaults to <dl>).

Accessibility

KeyValueList renders a semantic <dl> with <dt>/<dd> pairs by default, so assistive technology announces each label with its value. Set as="div" only when the surrounding markup already supplies the term/description semantics. When a value is itself a graphical or interactive element (a score ring, an avatar stack), give it an aria-label so the pairing stays meaningful without sight.

When to Use

• The "key facts" panel atop a detail or inspector page (org detail, user detail, billing summary)
• Rendering a single record's attributes as label/value pairs
• A 4-up editorial facts row with rich value nodes

When Not to Use

• Many records in rows and columns — use DataTable
• A single large KPI figure with delta / trend — use StatCard
• Editable form fields — use the Field family