KeyValue
Key-value pairs present compact metadata for objects, settings, and records.
Overview and decision boundary
Use KeyValue for compact metadata on records, settings, and object summaries.
Do not use for long prose or multi-step content.
Preview
- Owner
- Product team
- Updated
- Today
- Status
import { KeyValue } from '@nerio-ui/ui';<KeyValue label="Owner" value="Product team" />Installation and imports
Install the editable registry source, or use the matching package entrypoint when the product keeps Nerio as a workspace dependency.
pnpm dlx nerio add key-valueimport { KeyValue } from '@nerio-ui/ui';Usage
import { KeyValue } from '@nerio-ui/ui';<KeyValue label="Owner" value="Product team" />Variants
| Variant | Purpose |
|---|---|
Default | Compact label/value pair. |
Anatomy
| Slot | Purpose |
|---|---|
root | Native definition-list pair. |
label | Metadata key. |
value | Metadata value, text, or small component. |
States
| State | Purpose |
|---|---|
Static | Reads as metadata, not a control. |
Motion
- State changes should use shared motion tokens and preserve reduced-motion behavior.
Accessibility
- Renders a native dl with dt and dd children for one metadata pair.
- Keep labels concise and stable.
- Do not use for long prose values.
API
| Prop | Purpose |
|---|---|
className | Extends the component root while preserving Nerio tokenized defaults. |
Implementation contract
| Contract | Value |
|---|---|
Registry item | key-value installs 5 source files into the configured components directory. |
Base UI | No interactive primitive required. |
Registry dependencies | None. |
Package dependencies | clsx, react, tailwind-merge, tailwindcss |
Styling contract
| Contract | Value |
|---|---|
Authoring | Complete, statically detectable Tailwind CSS v4 recipes own component visuals. |
Values | Semantic and component --n-* variables remain the canonical customization layer. |
Overrides | Customizable slots merge consumer className values with tailwindCn so conflicting utilities resolve deterministically. |
Residual CSS | Only shared keyframes and scoped no-Preflight compatibility rules remain; there is no parallel visual selector layer. |
Design notes
- Use KeyValue for compact metadata on records, settings, and object summaries.
Do / do not
Do
Use for owner, updated date, status, and permissions.
Do not
Do not use for long prose or multi-step content.
Related components
Tokens
These are the primary customization points. Override semantic or component tokens instead of changing component source.
| Token | Purpose |
|---|---|
--n-key-value-gap | Public customization point for this component contract. |
--n-font-size-sm | Public customization point for this component contract. |