Key Value

Data Display

Utility

Compact technical metadata — API keys, resource IDs, endpoints — with copy-to-clipboard and monospace formatting.

When to use Key Value vs. Description List

Use Key Value for short, scannable technical metadata — IDs, API keys, webhook URLs, host names — where values fit on one line and users often need to copy them. Built-in copyable, mono, and masked-value support.

For longer descriptive content (profile bios, spec paragraphs, product specs) reach for Description List — it renders as semantic <dl> and handles multi-line values gracefully.

Preview

API credentials panel — the canonical Key Value use case

API Credentials

Use these to authenticate API requests

Publishable keypk_live_51MqLs92eZvKYlo2C

Secret keysk_live_••••••••••••••••

Webhook URLhttps://api.myapp.com/webhooks/stripe

EnvironmentProduction

Keep your secret key private. Never share it in public repositories.

Copy to clipboard

The headline feature — every technical value is one click away

API Keysk_live_51MqLs92eZvKYlo2C

Secret••••••••••••••••

Endpointhttps://api.example.com/v1/charges

Regionus-east-1

The copyValue prop lets you display a masked value while copying the real one — useful for secrets.

Resource IDs

Monospace formatting for technical identifiers

User IDusr_7k2m9x4n

Session IDsess_a8f3b2e1d4

Request IDreq_xyz789abc123

Correlation IDcorr_5e8f9a2b

Layouts

Three layouts tuned for different dashboard densities

Horizontal (default) — label and value on one line

Host:srv-01.example.com

Region:us-east-1

Vertical — label above value, best for forms and wide values

Webhook URLhttps://api.example.com/webhooks/receive

Callback URLhttps://app.example.com/oauth/callback

Inline — wrap multiple pairs in a single row

Version:2.4.1

License:MIT

Downloads:12.5k

Stars:8.2k

Grouped details

KeyValueGroup with optional dividers

Server details

Hostsrv-01.example.com

IP192.168.1.100

StatusRunning

Uptime45 days, 12 hours

Task details

Task IDtsk_2x8k4m

Queuedefault

Attempts1 of 3

StatusSucceeded

Sizes

Small, medium, and large text sizes

Environmentproduction

Props

Component API reference

KeyValue Props

Prop	Type	Default	Description
`label*`	`string`	—	The key/label
`value*`	`ReactNode`	—	The value
`layout`	`'horizontal' \| 'vertical' \| 'inline'`	`'horizontal'`	Layout direction
`size`	`'sm' \| 'md' \| 'lg'`	`'md'`	Text size
`copyable`	`boolean`	`false`	Show copy button
`copyValue`	`string`	—	Value to copy (if different from displayed value — useful for masked secrets)
`mono`	`boolean`	`false`	Use monospace font for value
`showColon`	`boolean`	`true`	Show colon after label in horizontal/inline layouts
`className`	`string`	—	Additional CSS classes

KeyValueGroup Props

Prop	Type	Default	Description
`items`	`KeyValueItem[]`	—	Array of KeyValue props
`layout`	`'horizontal' \| 'vertical' \| 'inline'`	`'horizontal'`	Layout for all items
`size`	`'sm' \| 'md' \| 'lg'`	`'md'`	Size for all items
`divided`	`boolean`	`false`	Add dividers between items
`spacing`	`'sm' \| 'md' \| 'lg'`	`'md'`	Spacing between items
`className`	`string`	—	Additional CSS classes

Usage

Import and implementation example

import { KeyValue, KeyValueGroup } from '@/components/ui/key-value'

// Copyable API key with monospace
<KeyValue
 label="API Key"
 value="pk_live_51MqLs92eZvKYlo2C"
 mono
 copyable
/>

// Masked secret — display mask, copy real value
<KeyValue
 label="Secret"
 value="••••••••••••••••"
 copyValue="sk_live_actual_secret_value"
 mono
 copyable
/>

// Group of resource details with dividers
<KeyValueGroup
 divided
 spacing="md"
 items={[
 { label: 'Task ID', value: 'tsk_2x8k4m', mono: true, copyable: true },
 { label: 'Queue', value: 'default', mono: true },
 { label: 'Attempts', value: '1 of 3' },
 ]}
/>

// Inline metadata row
<KeyValueGroup
 layout="inline"
 items={[
 { label: 'Version', value: '2.4.1' },
 { label: 'License', value: 'MIT' },
 ]}
/>

Features

Built-in functionality

Copy to clipboard: One-click copy with visual confirmation
Masked copy: Display a mask but copy the real secret
Monospace option: Proper formatting for codes, IDs, and keys
Truncation: Long values truncate gracefully in horizontal layout
Three layouts: Horizontal, vertical, and inline
Size variants: Small, medium, and large text sizes
Group component: KeyValueGroup with optional dividers and spacing
Dark mode: Full dark mode support

Accessibility

Accessibility considerations

ARIA Attributes

Copy button has an aria-label that flips to "Copied" after successCopy success is both visual (icon swap) and announced to screen readers

Keyboard Navigation

Key	Action
`Tab`	Navigate to copy buttons
`Enter / Space`	Copy value to clipboard

Notes

Monospace font improves readability of codes, IDs, and hashes
Labels are visually and spatially associated with their values
For long-form descriptive content, use Description List instead — it provides native dl/dt/dd semantics

Related Components

Description List Code Block Card