MetadataList

Key-value pairs in a grid layout with optional copy and link actions

Default

Usage

import { MetadataList } from '@tryvienna/ui'

<div className="w-96">
  <ContentProvider density="default">
    <MetadataList
      items={[
        { label: 'Full Name', value: 'Jane Doe', icon: <UserIcon /> },
        { label: 'Email', value: 'jane@example.com', icon: <MailIcon /> },
        { label: 'Created', value: 'March 1, 2026', icon: <CalendarIcon /> },
        { label: 'ID', value: 'usr_a1b2c3d4', icon: <HashIcon /> },
        { label: 'Location', value: 'San Francisco, CA', icon: <MapPinIcon /> },
        { label: 'Role', value: 'Engineering Manager' },
      ]}
    />
  </ContentProvider>
</div>

Examples

Default

Default

<div className="w-96">
  <ContentProvider density="default">
    <MetadataList
      items={[
        { label: 'Full Name', value: 'Jane Doe', icon: <UserIcon /> },
        { label: 'Email', value: 'jane@example.com', icon: <MailIcon /> },
        { label: 'Created', value: 'March 1, 2026', icon: <CalendarIcon /> },
        { label: 'ID', value: 'usr_a1b2c3d4', icon: <HashIcon /> },
        { label: 'Location', value: 'San Francisco, CA', icon: <MapPinIcon /> },
        { label: 'Role', value: 'Engineering Manager' },
      ]}
    />
  </ContentProvider>
</div>

Copyable

Copyable

<div className="w-96">
<ContentProvider density="default">
  <MetadataList
    items={[
      { label: 'User ID', value: 'usr_a1b2c3d4', copyable: true, icon: <HashIcon /> },
      { label: 'Email', value: 'jane@example.com', copyable: true, icon: <MailIcon /> },
      {
        label: 'API Key',
        value: 'sk_live_abc123...',
        copyable: true,
        copyValue: 'sk_live_abc123def456',

With Links

With Links

<div className="w-96">
  <ContentProvider density="default">
    <MetadataList
      items={[
        { label: 'Name', value: 'Jane Doe', icon: <UserIcon /> },
        { label: 'Profile', value: 'View profile', href: '#profile' },
        { label: 'Documentation', value: 'View docs', href: '#docs' },
        { label: 'Email', value: 'jane@example.com', icon: <MailIcon /> },
      ]}
    />
  </ContentProvider>
</div>

Compact Density

Compact Density

<div className="w-96">
  <ContentProvider density="compact">
    <MetadataList
      items={[
        { label: 'Name', value: 'Jane Doe', icon: <UserIcon /> },
        { label: 'Email', value: 'jane@example.com', icon: <MailIcon /> },
        { label: 'Created', value: 'March 1, 2026', icon: <CalendarIcon /> },
        { label: 'ID', value: 'usr_a1b2c3d4', copyable: true, icon: <HashIcon /> },
        { label: 'Location', value: 'San Francisco, CA', icon: <MapPinIcon /> },
      ]}
    />
  </ContentProvider>
</div>

API Reference

MetadataList

Prop	Type	Default	Description
items	MetadataItem[]	-

Data Attributes

Component	data-slot
MetadataList	"metadata-list"