KVList
v1.0.9Updated 27 Aug 2026Two-column key/value display list. Use for read-only metadata, attribute panels, audit summaries.
Preview
Live · 17 stories▸Why this is recommendedlistkvattributesmeta+2
KVList — stacked.
- ✓Detail page side panels
- ✓Settings summaries
- ✓Audit attribute lists
- Aligned key column
- Per-row icon support
- Sections / groups
- Inline edit affordance
- Data states — loading (skeleton), empty, and error (role="alert" with a caller-supplied message + Retry, taking precedence over loading/empty/content)
- i18n: labels prop overrides copy toasts, edit/copy/action aria-labels and the error message (DEFAULT_KV_LIST_LABELS)
- ✕Tabular many-row data (use DataTable)
- ✕Editable forms (use FormField rows)
Install
Ask your agent, or call the MCP tool directly. The resolved bundle is written into your project.
Usage
Tick variants in the left menu — each adds a tab with that variant’s real story source, the same code the preview above renders.
Props
itemsKey/value rows
yeseditableAllow inline edit
—layoutRow arrangement; 'grid' is an alias of 'multi'. 'multi' steps 1 -> 2 -> 3 columns off the width of the CONTAINER the list is in (intrinsic auto-fit tracks, min 13rem), not the viewport — so it stays correct inside a Sheet, Dialog or narrow pane on a wide screen. Pass your own style.gridTemplateColumns to override. MCP feedback fb_b9610152.
—errorError state: pass true for the default localized message or a ReactNode (message + Retry) for a custom one; renders a role="alert" region and takes precedence over loading/empty/content
—labelsOverride built-in UI strings (copy toasts, edit/save/cancel/copy/row-actions aria-labels, 'Edit {key}' template, error message) for i18n; English defaults exported as DEFAULT_KV_LIST_LABELS
—