Skip to content

Key Value

Compound component for displaying labeled data. KeyValue wraps one or more KeyValue.Item rows in a semantic description list.

Preview

Installation

$pnpm exec dgadd add ui/key-value
[Installs to]src/components/ui/key-value[Item]ui/key-value

dgadd ships in @diffgazer/add on npm: pnpm add -D @diffgazer/add puts it on pnpm exec, and npx @diffgazer/add runs it without the install.

UI components require Tailwind CSS v4. Local copy mode imports src/styles/styles.css; package mode uses @diffgazer/ui CSS from the installed package.

Usage

tsx
import { KeyValue } from "@/components/ui/key-value";export default function KeyValueDefault() {  return (    <KeyValue>      <KeyValue.Item label="Provider" value="OpenAI" />    </KeyValue>  );}

Examples

Variants

Preview

Description

Preview

Bordered

Preview

List

Preview

API Reference

KeyValue

NameTypeDefaultDescription
layout"horizontal" | "vertical""horizontal"Horizontal places label and value side-by-side; vertical stacks them. Propagated to KeyValue.Item via context.
borderedbooleanfalseAdds top separators between rows and switches items to compact xs sizing. Propagated to KeyValue.Item via context.
childrenrequiredReactNode—KeyValue.Item rows rendered inside a semantic <dl>.

KeyValue.Item

NameTypeDefaultDescription
labelrequiredReactNode—Label content rendered in a <dt>.
valuerequiredReactNode—Value content rendered in a <dd>.
descriptionReactNode—Optional qualifying copy for the pair, rendered as a second <dd> that spans the full row. Omit it and no element is rendered.
variant"default" | "warning" | "info" | "success" | "error""default"Color token applied to the value. Info renders monospace in the info color; the rest are bold semantic colors.
layout"horizontal" | "vertical"inherited from KeyValuePer-row override of the parent layout.
borderedbooleaninherited from KeyValuePer-row override for the inter-row top separator and compact sizing.
classNamestring—Class applied to the <dt> in addition to the variant classes. Other forwarded props land on the <dt> too.
valueClassNamestring—Class applied to the value <dd> in addition to the variant classes.
descriptionClassNamestring—Class applied to the description <dd> in addition to the variant classes.

Accessibility

Notes

When to use KeyValue vs Label

Use KeyValue for structured multi-row data display (metadata panels, commit info). Use Label for form field labeling.

Compound Usage

Always wrap KeyValue.Item inside KeyValue — this produces a proper <dl> list. For a single pair: <KeyValue><KeyValue.Item label='...' value='...' /></KeyValue>.

Color Variants

5 semantic color variants (default, warning, info, success, error) style the value text. The info variant renders monospace in the info color instead of bold.

Bordered Rows

Set bordered on KeyValue or KeyValue.Item to add top separators between rows, vertical padding, and compact text-xs sizing — ideal for stacked list layouts.

Layout Options

Horizontal layout (default) places label and value side-by-side. Vertical layout stacks them with a small gap. Both label and value accept ReactNode.

Descriptions

Pass description to qualify a pair with a line of muted copy. It renders as a second <dd> for the same <dt>, spanning the full row in horizontal layout — so callers never have to restate the grid's column count.

Class Slots

KeyValue.Item renders up to three elements: className (and every other forwarded prop) lands on the <dt>, valueClassName on the value <dd>, descriptionClassName on the description <dd>. All preserve the <dl>/<dt>/<dd> structure.

Source

Install via CLI: pnpm exec dgadd add ui/key-value.

Highlighted source loads after this disclosure opens. Browse the source repository.