Data List
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.
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.jsonNamed registry:
npx shadcn-vue@latest add @uipkge/data-listInstalls to:app/components/ui/data-list/Examples
Loading interactive previews…
Loading interactive previews…
Props
| Name | Type / Values | Default | Required |
|---|---|---|---|
class | HTMLAttributes['class'] | — | optional |
Used by
Files installed (3)
app/components/ui/data-list/DataList.vue0.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.vue0.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.ts0.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