Card List

A keyed responsive card collection with empty-state and counted or uncounted pagination composition.

registry:ui Registry JSON

Single-line diagram

ENG-001 · Ready for client review

Equipment layout

ENG-002 · Revision requested

Cable schedule

ENG-003 · Approved for construction

Showing 1–3 of 12 documents

Installation

pnpm dlx shadcn-svelte@latest add https://shadcn.cptckp.com/r/card-list.json

The CLI copies the source into your project and installs every dependency listed below.

Usage

import * as CardList from '$lib/components/ui/card-list/index.js';

example.svelte

svelte

<script lang="ts">
	import * as Card from '$lib/components/ui/card/index.js';
	import * as CardList from '$lib/components/ui/card-list/index.js';

	const items = [
		{ id: 'ENG-001', description: 'Ready for client review', title: 'Single-line diagram' },
		{ id: 'ENG-002', description: 'Revision requested', title: 'Equipment layout' },
		{ id: 'ENG-003', description: 'Approved for construction', title: 'Cable schedule' }
	];
</script>

<div class="flex w-full flex-col gap-4">
	<CardList.Root {items} getItemId={(item) => item.id} ariaLabel="Engineering documents">
		{#snippet item(item)}
			<Card.Root size="sm">
				<Card.Header>
					<Card.Title>{item.title}</Card.Title>
					<Card.Description>{item.id} · {item.description}</Card.Description>
				</Card.Header>
			</Card.Root>
		{/snippet}
	</CardList.Root>
	<CardList.Footer
		count={12}
		itemCount={items.length}
		itemLabel="document"
		page={1}
		perPage={3}
		onPageChange={() => undefined}
	/>
</div>

Files & dependencies

Installed as	Source
card-list/card-list-footer.svelte	src/lib/registry/ui/card-list/card-list-footer.svelte
card-list/card-list.svelte	src/lib/registry/ui/card-list/card-list.svelte
card-list/index.ts	src/lib/registry/ui/card-list/index.ts
card-list/types.ts	src/lib/registry/ui/card-list/types.ts

npm dependencies

@lucide/svelte@^1.28.0

Registry dependencies

button
pagination