Getting StartedComponentsDesign TokensThemingTheme SynthesizerFrameworksAccessibilityUtilitiesServer RenderingBrowser SupportContributingChangelog App ShellAspect GridAuth ShellCenterClusterContainerDashboard GridDockFloat BarInsetMasonryPage HeaderPage LayoutResizableResponsive SwitcherSectionSettings LayoutSplit PaneStatus BarStickyToolbar Anchor NavBottom NavBreadcrumbBreadcrumb MenuCommand BarDrawerFooterLinkMenubarNavigation MenuPage IndicatorPaginationRailScroll IndicatorScroll SpyScroll To TopSidebarSkip LinkSpeed DialStepper NavTabsTop BarTree View AccordionAspect RatioAvatarAvatar GroupCalloutCardCarouselCollapsibleColor SwatchCTA BannerDividerEmpty StateFeature CardIconImageImage CompareImage HotspotsInfinite ScrollLightboxMarqueeQR CodeScroll AreaSeparatorSkeletonSpinnerStackVideoVirtual List Activity HeatmapAnimated NumberBadgeChartClockComparisonCountdown TimerData GridData TableDescription ListDiffEvent CalendarGaugeJSON TreeKanbanKey ValueLevel MeterListMeterSparklineStatStepperTableTagTimelineUptimeValue CardWaveform BlockquoteCode BlockGradient TextHighlightKbdKeyboard MapMarkdownNumber FormatProseTerminalTextTime AgoTruncateTypewriter ButtonButton GroupCalendarCheckboxChipColor PickerComboboxCopy ButtonDate PickerDate Range PickerFieldsetFile UploadFormHotkeyIcon ButtonImage CropperInline EditInputInput GroupKnobLabelMasked InputMulti SelectNumber InputOTP InputPassword InputPin InputRadio GroupRange SliderRatingSearchSegmented ControlSelectSignature PadSliderSortable ListSwitch GroupTag InputTextareaTheme ToggleTime PickerToggleTransfer ListTree Select AlertAnnouncementBannerCommand PaletteConfirmConnection StatusContext MenuConversationDialogDropdown MenuGuided TourHover CardInline MessageLoading OverlayModalNotification PanelPopoverProgressProgress ToastSheetSnackbarSpotlightToastTooltip
ARC UI ARC Radiant Components
v3.2 Docs Components Tokens Synthesizer
Getting StartedFrameworksServer Rendering Design TokensThemingTheme SynthesizerTypographyUtilities All ComponentsAccessibilityBrowser SupportChangelogContributingStats App ShellAspect GridAuth ShellCenterClusterContainerDashboard GridDockFloat BarInsetMasonryPage HeaderPage LayoutResizableResponsive SwitcherSectionSettings LayoutSplit PaneStatus BarStickyToolbar Anchor NavBottom NavBreadcrumbBreadcrumb MenuCommand BarDrawerFooterLinkMenubarNavigation MenuPage IndicatorPaginationRailScroll IndicatorScroll SpyScroll To TopSidebarSkip LinkSpeed DialStepper NavTabsTop BarTree View AccordionAspect RatioAvatarAvatar GroupCalloutCardCarouselCollapsibleColor SwatchCTA BannerDividerEmpty StateFeature CardIconImageImage CompareImage HotspotsInfinite ScrollLightboxMarqueeQR CodeScroll AreaSeparatorSkeletonSpinnerStackVideoVirtual List Activity HeatmapAnimated NumberBadgeChartClockComparisonCountdown TimerData GridData TableDescription ListDiffEvent CalendarGaugeJSON TreeKanbanKey ValueLevel MeterListMeterSparklineStatStepperTableTagTimelineUptimeValue CardWaveform BlockquoteCode BlockGradient TextHighlightKbdKeyboard MapMarkdownNumber FormatProseTerminalTextTime AgoTruncateTypewriter ButtonButton GroupCalendarCheckboxChipColor PickerComboboxCopy ButtonDate PickerDate Range PickerFieldsetFile UploadFormHotkeyIcon ButtonImage CropperInline EditInputInput GroupKnobLabelMasked InputMulti SelectNumber InputOTP InputPassword InputPin InputRadio GroupRange SliderRatingSearchSegmented ControlSelectSignature PadSliderSortable ListSwitch GroupTag InputTextareaTheme ToggleTime PickerToggleTransfer ListTree Select AlertAnnouncementBannerCommand PaletteConfirmConnection StatusContext MenuConversationDialogDropdown MenuGuided TourHover CardInline MessageLoading OverlayModalNotification PanelPopoverProgressProgress ToastSheetSnackbarSpotlightToastTooltip

Key Value

A styled definition list for displaying labeled key-value pairs. Supports horizontal and stacked layouts with optional dividers between rows.

Components Key Value
data static
<arc-key-value>

Overview

KeyValue provides a clean, scannable way to present labeled data — similar to a definition list, but styled with ARC UI's token system. Each pair is an `arc-kv-pair` element with a `label` attribute for the term and slotted content for the value. Two layout modes cover the most common patterns: horizontal (grid-based, with the key and value side by side) and stacked (key above value). An optional `dividers` prop adds subtle separators between rows for improved readability in longer lists. Pairs respond to hover with a subtle background highlight, making it easy to track which row you're reading. The component uses semantic markup and exposed CSS parts for full style customization.

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

  • Do not use for tabular data with many columns — use `arc-data-table` instead
  • Do not use for form field labels — use proper `arc-label` and input components
  • Do not mix raw HTML elements with `arc-kv-pair` children
  • Do not 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';

export default function Example() {
  return (
    <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: `
    <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>
  `,
})
export class ServerDetailsComponent {}
 
import { KeyValue, KvPair } from '@arclux/arc-ui-solid';

export default function Example() {
  return (
    <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';

export default function Example() {
  return (
    <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

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.

label string ''
The key/term text displayed in uppercase accent styling.

See Also
ARC UI

Components that glow. One Lit source, seven native targets.

Docs

Project

Arclight

© 2026 Arclight Digital, LLC. All rights reserved.

Documentation generated with AI assistance and reviewed by humans. Found an issue? Open a GitHub issue.

Privacy Policy