UIPackage
Vue React

Data List

Vue 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 React ->

Installation

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

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

Examples

Used by

event-list

Files (3)

  • app/components/ui/data-list/DataList.vue 0.2 kB 
    <script setup lang="ts">
import { cn } from '@/lib/utils'
</script>

<template>
  <div :class="cn('flex flex-col', $attrs.class as string)">
    <slot />
  </div>
</template>
  • app/components/ui/data-list/DataListItem.vue 0.3 kB 
    <script setup lang="ts">
import { cn } from '@/lib/utils'
</script>

<template>
  <div
    :class="
      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',
        $attrs.class as string,
      )
    "
  >
    <slot />
  </div>
</template>
  • app/components/ui/data-list/index.ts 0.1 kB 
    export { default as DataList } from './DataList.vue'
export { default as DataListItem } from './DataListItem.vue'

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