ComponentsData display

Description list

Label/value pairs for record details and summaries — a native <dl>. Horizontal, vertical or grid layouts that follow the container width, locale formatting for numbers and dates, copy buttons and click-to-edit values.

Native <dl> components/description-list.tsx, lib/data-islands.tsx, lib/value-format.ts, styles/data.csstheme · material · accent · density · font

Northwind renewal

Deal details

Negotiation

Owner: Ayşe Kaya
Company: Northwind Traders
Deal value: $48,500.00
Probability: 65%
Expected close: Dec 15, 2026Moved from Nov 30 by Ayşe
Lead source: Not set

Installation

$ pnpm add @vamos-ui/react

The whole kit as one package — get updates by bumping the version. Add the styles to globals.css: @import "@vamos-ui/react/styles.css";

Usage

import { DescriptionList } from "@vamos-ui/react";

<DescriptionList items={[
  { key: "owner", label: "Owner", value: "Ayşe Kaya" },
  { key: "value", label: "Deal value", value: "48500.00", format: "currency" },
  { key: "iban", label: "IBAN", value: "TR33 0006 1005 1978 6457 8413 26", copyable: true },
]} />

Examples

Grid with spans (HR)

layout="grid" with columns; span: 2 or "full" for long values. Columns drop on narrow containers.

Ece Demir

Employee · Studio team

Job title: Senior product designer
Manager: Meltem Aydın
Start date: Mar 6, 2023
Location: Istanbul · hybrid
Contract: Full-time, permanent
Leave balance: 11 days
Notes: In the office Tuesdays and Thursdays. Mentoring two junior designers since September.

Copyable values

copyable copies the text value, or the string you pass (IBAN without spaces). Confirmed visually and announced.

Payment details

Share these with the client for a bank transfer.

Account holder: Vamos Dijital Ltd.
IBAN: TR33 0006 1005 1978 6457 8413 26
SWIFT: TGBATRIS
Reference: INV-2041Ask the client to include it in the transfer note.

Inline edit

editable rows + onEdit. The value is a button ("Edit Phone"); Enter saves, Escape cancels; a rejected promise shows the error.

Burak Şen

Click a value to edit · Enter saves · Escape cancels

Company: Kadıköy Bistro
Email
Phone
Website

Sections (CMS)

DescriptionGroup titles a section and names it as a region.

Post

Status: Scheduled
Publish on: Nov 11, 2026, 6:00 AM
Author: Meltem Aydın

SEO

How the post appears in search results.

Slug: google-business-profile-guide
Meta title: How to stand out on Google Business Profile
Word count: 1,840
Canonical URL: Not set

Loading, vertical, empty values

loading renders label + value skeletons; empty values show — (or emptyValue) and read "Not set".

Order #10482

Order #10482

Vertical layout, custom empty value

Customer: İlker Şahin
Total: $1,249.90
Coupon: Not provided

API

DescriptionList

Prop	Type	Default
`items` Rows as data — or compose DescriptionItem children.	`DescriptionEntry[]`	`—`
`layout` Horizontal stacks under ~28rem of container width.	`"horizontal" \| "vertical" \| "grid"`	`"horizontal"`
`columns` Grid columns (container queries).	`1 \| 2 \| 3`	`2`
`labelWidth` Label column width (horizontal).	`string`	`"11rem"`
`divided` Hairlines between rows.	`boolean`	`true (horizontal)`
`size` Text size and row spacing.	`"sm" \| "md"`	`"md"`
`emptyValue` Shown for empty values.	`ReactNode`	`"—"`
`onEdit` Saves editable rows; reject to show the error.	`(key: string, value: string) => void \| Promise<void>`	`—`
`loading` Skeleton rows (default 4).	`boolean \| number`	`—`
`labels` copy, copied, edit, save, cancel, saving, error, empty.	`Partial<DescriptionListLabels>`	`—`

DescriptionEntry

Prop	Type	Default
`key` Stable key, passed to onEdit.	`string`	`—`
`label / value` The pair.	`ReactNode`	`—`
`format` "number" \| "currency" \| "compact" \| "percent" \| "date" \| "datetime" \| "relative" \| …	`ValueFormat`	`—`
`hint` Help text under the value.	`ReactNode`	`—`
`copyable` Copy button.	`boolean \| string`	`—`
`span` Grid span.	`1 \| 2 \| "full"`	`—`
`editable / editValue / inputType` Inline edit.	`boolean / string / input type`	`—`

DescriptionItem

Prop	Type	Default
`label` The dt.	`ReactNode`	`—`
`children` The value.	`ReactNode`	`—`
`copyable` Copy button.	`boolean \| string`	`—`
`edit` Inline edit slot (e.g. DescriptionEditable).	`ReactNode`	`—`
`action` Trailing slot (link, badge).	`ReactNode`	`—`
`hint / span / emptyValue` As in DescriptionEntry.	`…`	`—`

DescriptionEditable

Prop	Type	Default
`value` Current value.	`string`	`—`
`onSave` Save handler.	`(value: string) => void \| Promise<void>`	`—`
`label` Field name for accessible names.	`string`	`—`
`display` Formatted read view.	`ReactNode`	`—`
`inputType` Input type.	`"text" \| "email" \| "tel" \| "url" \| "number"`	`"text"`

DescriptionGroup

Prop	Type	Default
`title` Section heading (names the region).	`ReactNode`	`—`
`description` Secondary line.	`ReactNode`	`—`
`titleAs` Heading level.	`"h2" \| "h3" \| "h4" \| "h5"`	`"h4"`
`action` Slot at the end of the heading row.	`ReactNode`	`—`

Date range picker

Dialog