5Sponsor

Key Value

Aligned key–value pairs

Terminal
key-value-demo
No opentui live preview is registered for this example yet.

Installation

pnpm dlx shadcn@latest add @termcn/key-value

Usage

import { KeyValue } from "@/components/ui/key-value";
<KeyValue
  items={[
    { key: "Name", value: "my-app" },
    { key: "Version", value: "2.1.0" },
    { key: "License", value: "MIT" },
  ]}
/>

API Reference

KeyValue

PropTypeDefault
itemsKeyValueItem[]required
keyWidthnumberundefined
separatorstring":"
keyColorstringundefined
valueColorstringundefined

KeyValueItem

PropTypeDefault
keystringrequired
valueReactNoderequired
colorstringundefined