UIPackage
Menu

Framework

VueReactAngularSvelteWeb Components

Change language

GitHub repo

Data List

data-listui
Boilerplate repo

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.

Installation

$npx shadcn-svelte@latest add https://uipkge.dev/r/svelte/data-list.json
Manifest:https://uipkge.dev/r/svelte/data-list.jsonInstalls to:src/lib/components/ui/data-list/

Examples

Loading interactive previews…

Props

NameType / ValuesDefaultRequired
refHTMLDivElement | null—optional

Used by

Files installed (3)

  • src/lib/components/ui/data-list/DataList.svelte0.5 kB
    <script lang="ts" module>
  import type { HTMLAttributes } from 'svelte/elements'

  export interface DataListProps extends HTMLAttributes<HTMLDivElement> {
    ref?: HTMLDivElement | null
  }
</script>

<script lang="ts">
  import { cn } from '$lib/utils'

  let { class: className, children, ref = $bindable(null), ...restProps }: DataListProps = $props()
</script>

<div bind:this={ref} data-uipkge data-slot="data-list" class={cn('flex flex-col', className)} {...restProps}>
  {@render children?.()}
</div>
  • src/lib/components/ui/data-list/DataListItem.svelte0.6 kB
  • src/lib/components/ui/data-list/index.ts0.2 kB

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