Data List

A list of similar data items with labels and values.

New Users: 234
Sales: £12,340
Revenue: 3,450

Installation


pnpm dlx shadcn@latest add https://shark.vini.one/r/data-list.json

Usage


import {
  DataList,
  DataListItem,
  DataListItemLabel,
  DataListItemValue,
} from "@/components/ui/data-list";


<DataList>
  <DataListItem>
    <DataListItemLabel>Name</DataListItemLabel>
    <DataListItemValue>John Doe</DataListItemValue>
  </DataListItem>
  <DataListItem>
    <DataListItemLabel>Email</DataListItemLabel>
    <DataListItemValue>john@example.com</DataListItemValue>
  </DataListItem>
</DataList>

Orientation

Use the orientation prop to change the orientation of the datalist component.

Horizontal

First Name: Jassie
Last Name: Bhatia
Email: jassie@example.com

Vertical

First Name: Jassie
Last Name: Bhatia
Email: jassie@example.com

Examples

Info Tip

Render the Hint component within DataListItem to provide additional context to the datalist.

New Users: 234
Sales: £12,340
Revenue: 3,450

Separator

Use the divide-y utility class on DataList to add a separator between items.

First Name: Jassie
Last Name: Bhatia
Email: jassie@example.com
Phone: 1234567890
Address: 1234 Main St, Anytown, USA

API Reference

DataList

Root wrapper for label-value list layout.

Prop	Type	Default
`orientation`	`"horizontal" \| "vertical"`	`"horizontal"`
`className`	`string`	-
`asChild`	`boolean`	`false`

DataListItem

Single label-value row.

Prop	Type	Default
`className`	`string`	-
`asChild`	`boolean`	`false`

DataListItemLabel

Label or key for the row.

Prop	Type	Default
`className`	`string`	-
`asChild`	`boolean`	`false`

DataListItemValue

Value or content for the row.

Prop	Type	Default
`className`	`string`	-
`asChild`	`boolean`	`false`

On This Page

Installation Usage Orientation Horizontal Vertical Examples Info Tip Separator API Reference DataList DataListItem DataListItemLabel DataListItemValue