Key Value

Foundations · Collapsible, Kbd, KeyValue, Spinner, StatusIndicator

Small building blocks for detail panels: KeyValue (label/value list), Kbd (keyboard keys), Spinner, Collapsible.

KeyValue: items ([label, value, mono] or {k, v, mono}), dense. Empty values show a dash.
Kbd: keys (array). Spinner: size ("lg"), label. Collapsible: title, meta, defaultOpen / open + onOpenChange, children.

Keep keys short nouns; values that are codes, IDs or addresses use mono.
Show a spinner only after ~300 ms; inside a button it replaces the icon.

PreviewCode

Server: ax41-fsn1
Address: 95.217.14.80
Kernel: 6.8.0-45
Backups: Nightly · 03:00
Notes: —

Search⌘KApproveA

Timeout: 30 s
Retries: 3

Props

Collapsible

Prop	Type	Notes
`title`	`ReactNode`	Required
`meta?`	`ReactNode`
`defaultOpen?`	`boolean`
`open?`	`boolean`
`onOpenChange?`	`(open: boolean) => void`
`children?`	`ReactNode`
`className?`	`string`	Extra class on the root element.
`style?`	`CSSProperties`	Inline style on the root element.

Kbd

Prop	Type	Notes
`keys?`	`string[]`
`children?`	`ReactNode`
`className?`	`string`	Extra class on the root element.
`style?`	`CSSProperties`	Inline style on the root element.

KeyValue

Prop	Type	Notes
`items`	`KeyValueItem[]`	Required
`dense?`	`boolean`
`className?`	`string`	Extra class on the root element.
`style?`	`CSSProperties`	Inline style on the root element.

Spinner

Prop	Type	Notes
`size?`	`"lg"`
`label?`	`string`
`className?`	`string`	Extra class on the root element.
`style?`	`CSSProperties`	Inline style on the root element.

StatusIndicator

Prop	Type	Notes
`status`	`Status`	Required
`label?`	`ReactNode`
`size?`	`"sm"`
`className?`	`string`	Extra class on the root element.
`style?`	`CSSProperties`	Inline style on the root element.