# Data List

Label–value pairs for details views.

Group: Basics

## Import

```tsx
import { DataList } from "@indoku/ui"
```

## Examples

### Basic usage

```tsx
function DataListDemo() {
  return (
    <DataList.Root maxW="sm">
      {[
        ["Nama", "Indoku Bot"],
        ["Status", "Aktif"],
        ["Versi", "0.0.1"],
      ].map(([label, value]) => (
        <DataList.Item key={label}>
          <DataList.ItemLabel>{label}</DataList.ItemLabel>
          <DataList.ItemValue>{value}</DataList.ItemValue>
        </DataList.Item>
      ))}
    </DataList.Root>
  )
}
```