Data List

The DataList component displays data as a structured list of key-value pairs. It's useful for showing metadata, status information, or any structured data in a clean, readable format.

import { DataList } from "@pipecat-ai/voice-ui-kit";

<DataList
  data={{
    "Status": "Connected",
    "Session ID": "abc123",
    "Version": "1.0.0"
  }}
/>

Component Variants

DataList

The DataList component displays key-value pairs in a grid layout.

import { DataList } from "@pipecat-ai/voice-ui-kit";

<DataList
  data={{
    "Key 1": "Value 1",
    "Key 2": "Value 2"
  }}
/>

Prop	Type	Default
`data`	`Record<string, string \| React.ReactNode>`	-
`classNames?`	`{ container?: string; key?: string; value?: string; }`	`{}`

Usage

Basic Usage

Display simple key-value pairs.

import { DataList } from "@pipecat-ai/voice-ui-kit";

<DataList
  data={{
    "Name": "John Doe",
    "Email": "john@example.com",
    "Status": "Active"
  }}
/>

With React Nodes

Values can be React components or nodes.

import { DataList, Badge } from "@pipecat-ai/voice-ui-kit";

<DataList
  data={{
    "Status": <Badge variant="success">Online</Badge>,
    "Count": <span className="font-bold">42</span>
  }}
/>

Custom Styling

Apply custom classes to different parts of the list.

import { DataList } from "@pipecat-ai/voice-ui-kit";

<DataList
  data={{
    "Key": "Value"
  }}
  classNames={{
    container: "border rounded p-4 bg-muted",
    key: "font-bold text-primary",
    value: "text-lg"
  }}
/>

Long Values

Long values are automatically truncated with ellipsis.

import { DataList } from "@pipecat-ai/voice-ui-kit";

<div className="w-64">
  <DataList
    data={{
      "Long Key": "This is a very long value that will be truncated"
    }}
  />
</div>

Layout

The component uses a CSS grid with:

Keys: Left column, muted foreground color, right-aligned
Values: Right column, monospace font, right-aligned, truncated if too long

The grid layout gives keys approximately 1/3 of the width and values 2/3.

On this page