UIPackage
Vue React

Data List

React data-display
Edit on GitHub

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

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

Or with the named registry: npx shadcn@latest add @uipkge-react/data-list

Examples

Used by

event-list

Files (2)

  • components/ui/data-list/data-list.tsx 0.7 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} className={cn('flex flex-col', className)} {...props} />
  ),
)
DataList.displayName = 'DataList'

const DataListItem = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
  ({ className, ...props }, ref) => (
    <div
      ref={ref}
      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 }
  • components/ui/data-list/index.ts 0.1 kB 
    export { DataList, DataListItem } from './data-list'

Raw manifest: https://react.uipkge.dev/r/react/data-list.json