KeyValue

Par etiqueta/valor para sidebars de metadatos, fichas técnicas y paneles de detalle. Tres layouts (horizontal, vertical, inline) y un wrapper KeyValueList con divisores opcionales para agrupar varios pares de forma consistente.

EstadoOperativo

Regióneu-west-1

Versiónv2.14.0

MAU12,4 M

Instalación#

bash

pnpm add @tsukira/ui

Uso#

tsx

import { KeyValue, KeyValueList } from "@tsukira/ui"; <KeyValueList divided>  <KeyValue label="Estado" value={<Badge tone="success" dot>Activo</Badge>} />  <KeyValue label="Región" value="eu-west-1" />  <KeyValue label="Versión" value="v2.14.0" /></KeyValueList>

Ejemplos#

Playground

cambia las props y el código se regenera

Usuario@kimi_no_ui

label*

layout

divided

Inactivo

Layouts

horizontal · vertical · inline

Regióneu-west-1

Lista con divisores

KeyValueList divided — ideal para sidebars de metadatos

EstadoOperativo

Regióneu-west-1

Versiónv2.14.0

MAU12,4 M

Valores enriquecidos

el value acepta cualquier ReactNode — badges, spans con monospace…

EstadoDegradado

PlanPRO

Commita4f9c3d

Latencia42 ms

Fusión: panel de detalle en Card con Badge de estado

KeyValueList dentro de una Card — patrón sidebar de metadatos

Servicio

API Gateway

Microservicio de enrutamiento principal

Operativo

Regióneu-west-1

Versiónv3.1.2

Uptime99,98 %

Latencia p9538 ms

Último deployhace 2 h

Fusión: ficha técnica con Button de copiar

Tokens de configuración con acción rápida por par

Credenciales

Conexión a base de datos

Hostpostgres.app.internal

Puerto5432

Base de datosprod_app_db

SSLHabilitado

API#

KeyValuePropsextends HTMLAttributes<HTMLDivElement>

Prop	Tipo	Default	Descripción
`label`*	`ReactNode`	—	Label del par.
`value`*	`ReactNode`	—	Valor — string, número, badge, link, lo que sea.
`layout`	`'horizontal' \| 'vertical' \| 'inline'`	—	Layout del par: - `'horizontal'` (default) — label izquierda, value derecha alineado, ideal sidebars metadata - `'vertical'` — label arriba en uppercase, value abajo, ideal cards/forms - `'inline'` — "Label: value" en una sola línea, ideal entre texto narrativo

KeyValueListPropsextends HTMLAttributes<HTMLDivElement>

Prop	Tipo	Default	Descripción
`divided`	`boolean`	—	Divisor horizontal entre pares (recomendado en sidebars).