Key Value — ARC UI

Components

Key Value

data

static

<arc-key-value>

Overview

Guidelines

When to use

Use for metadata displays — server details, user profiles, order summaries
Use `arc-kv-pair` as direct children for consistent styling
Use horizontal layout when keys are short and values are single-line
Use stacked layout when values are long or multi-line
Pair with `arc-card` to contain key-value groups within panels

When not to use

Use for tabular data with many columns — use `arc-data-table` instead
Use for form field labels — use proper `arc-label` and input components
Mix raw HTML elements with `arc-kv-pair` children
Use for navigation or action lists — use `arc-list` instead

Features

Two layout modes: horizontal (grid) and stacked (flex column)
Optional dividers between key-value pairs for visual separation
Subtle hover highlight on each pair row for readability
Keys styled with accent font, uppercase, and letter-spacing for clear hierarchy
Values support arbitrary slotted content — text, badges, links, icons
Exposed CSS parts: list, pair, key, value
Respects `prefers-reduced-motion` for transitions

Preview

Active

US-East

99.9%

2 hours ago

Usage

<arc-key-value>
  <arc-kv-pair label="Status">Active</arc-kv-pair>
  <arc-kv-pair label="Region">US-East</arc-kv-pair>
  <arc-kv-pair label="Uptime">99.9%</arc-kv-pair>
  <arc-kv-pair label="Last Deploy">2 hours ago</arc-kv-pair>
</arc-key-value>

import { KeyValue, KvPair } from '@arclux/arc-ui-react';

<KeyValue>
  <KvPair label="Status">Active</KvPair>
  <KvPair label="Region">US-East</KvPair>
  <KvPair label="Uptime">99.9%</KvPair>
  <KvPair label="Last Deploy">2 hours ago</KvPair>
</KeyValue>

<script setup>
import { KeyValue, KvPair } from '@arclux/arc-ui-vue';
</script>

<template>
  <KeyValue>
    <KvPair label="Status">Active</KvPair>
    <KvPair label="Region">US-East</KvPair>
    <KvPair label="Uptime">99.9%</KvPair>
    <KvPair label="Last Deploy">2 hours ago</KvPair>
  </KeyValue>
</template>

<script>
  import { KeyValue, KvPair } from '@arclux/arc-ui-svelte';
</script>

<KeyValue>
  <KvPair label="Status">Active</KvPair>
  <KvPair label="Region">US-East</KvPair>
  <KvPair label="Uptime">99.9%</KvPair>
  <KvPair label="Last Deploy">2 hours ago</KvPair>
</KeyValue>

import { Component } from '@angular/core';
import { KeyValue, KvPair } from '@arclux/arc-ui-angular';

@Component({
  imports: [KeyValue, KvPair],
  template: `
    <KeyValue>
      <KvPair label="Status">Active</KvPair>
      <KvPair label="Region">US-East</KvPair>
      <KvPair label="Uptime">99.9%</KvPair>
      <KvPair label="Last Deploy">2 hours ago</KvPair>
    </KeyValue>
  `,
})
export class ServerDetailsComponent {}

import { KeyValue, KvPair } from '@arclux/arc-ui-solid';

<KeyValue>
  <KvPair label="Status">Active</KvPair>
  <KvPair label="Region">US-East</KvPair>
  <KvPair label="Uptime">99.9%</KvPair>
  <KvPair label="Last Deploy">2 hours ago</KvPair>
</KeyValue>

import { KeyValue, KvPair } from '@arclux/arc-ui-preact';

<KeyValue>
  <KvPair label="Status">Active</KvPair>
  <KvPair label="Region">US-East</KvPair>
  <KvPair label="Uptime">99.9%</KvPair>
  <KvPair label="Last Deploy">2 hours ago</KvPair>
</KeyValue>

API

Prop	Type	Default	Description
`layout`	`'horizontal' \| 'stacked'`	`'horizontal'`	Controls pair arrangement. Horizontal uses a CSS grid with key and value side by side. Stacked places the key above the value.
`dividers`	`boolean`	`true`	When true, renders a subtle border between each key-value pair.

KV Pair

<arc-kv-pair>

A single key-value pair within an arc-key-value container. The `label` attribute provides the key text, and the default slot holds the value content.

Prop	Type	Default	Description
`label`	`string`	`''`	The key/term text displayed in uppercase accent styling.
`default slot`	`slot`	—	The value content — can be text, badges, links, or any inline/block content.