Data List

data-listui

Vertical key/value list for showing read-only metadata — invoice details, settings summaries, profile fields. Pair items in label/value rows; supports inline edit triggers and trailing actions per row.

Also available for Vue ->

Installation

$pnpm dlx shadcn@latest add https://uipkge.dev/r/react/data-list.json

$npx shadcn@latest add https://uipkge.dev/r/react/data-list.json

$yarn dlx shadcn@latest add https://uipkge.dev/r/react/data-list.json

$bunx shadcn@latest add https://uipkge.dev/r/react/data-list.json

Named registry:npx shadcn@latest add @uipkge-react/data-listInstalls to:components/ui/data-list/

Examples

Loading interactive previews…

Used by

event-list

[data-used-by-list] { max-height: none !important; overflow: visible !important; } [data-used-by-toggle] { display: none !important; }

Files installed (2)

components/ui/data-list/data-list.tsx0.8 kB

import * as React from 'react'
import { cn } from '@/lib/utils'

const DataList = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
  ({ className, ...props }, ref) => (
    <div ref={ref} data-uipkge="" data-slot="data-list" className={cn('flex flex-col', className)} {...props} />
  ),
)
DataList.displayName = 'DataList'

const DataListItem = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
  ({ className, ...props }, ref) => (
    <div
      ref={ref}
      data-uipkge=""
      data-slot="data-list-item"
      className={cn(
        'flex flex-row items-center justify-between border-b py-4 transition-colors duration-200 first:pt-0 last:border-0 last:pb-0',
        className,
      )}
      {...props}
    />
  ),
)
DataListItem.displayName = 'DataListItem'

export { DataList, DataListItem }