Data List

data-list ui

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

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

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

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

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

Named registry: npx shadcn-vue@latest add @uipkge/data-list Installs to: app/components/ui/data-list/

Examples

Loading interactive previews…

Props

Name	Type / Values	Default	Required
`class`	`HTMLAttributes['class']`	—	optional

Used by

event-list

Files installed (3)

app/components/ui/data-list/DataList.vue 0.3 kB

<script setup lang="ts">
import type { HTMLAttributes } from 'vue'
import { cn } from '@/lib/utils'

const props = defineProps<{
  class?: HTMLAttributes['class']
}>()
</script>

<template>
  <div data-uipkge data-slot="data-list" :class="cn('flex flex-col', props.class)">
    <slot />
  </div>
</template>

app/components/ui/data-list/DataListItem.vue 0.5 kB

<script setup lang="ts">
import type { HTMLAttributes } from 'vue'
import { cn } from '@/lib/utils'

const props = defineProps<{
  class?: HTMLAttributes['class']
}>()
</script>

<template>
  <div
    data-uipkge
    data-slot="data-list-item"
    :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',
        props.class,
      )
    "
  >
    <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

Change language