data-listuiVertical 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 ->$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.jsonnpx shadcn-vue@latest add @uipkge/data-listInstalls to:app/components/ui/data-list/| Name | Type / Values | Default | Required |
|---|---|---|---|
class | HTMLAttributes['class'] | — | optional |
<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>
<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>
export { default as DataList } from './DataList.vue'
export { default as DataListItem } from './DataListItem.vue'
Raw manifest:https://uipkge.dev/r/vue/data-list.json
