List

Grid-based list component with FLIP reorder, scale enter/exit animations, three visual variants, density presets, and multi-column layout.

Import

ts 
import List, { type ListItem } from '$lib/components/List.svelte';

Usage

svelte 
<script lang="ts">
  import List, { type ListItem } from '$lib/components/List.svelte';

  const items: ListItem[] = [
    { id: 1, label: 'Crash',   description: 'Card game' },
    { id: 2, label: 'Aviator', description: 'Multiplier game' },
  ];
</script>

<List {items} onselect={(item) => console.log(item)} />

Animated — FLIP reorder

Shuffle reorders with a spring FLIP animation. Add/remove items animate in and out with a scale transition. Click an item to remove it.

svelte 
<!-- animated FLIP reorder + enter/exit (default: true) -->
<List {items} animated />

<!-- disable all motion -->
<List {items} animated={false} />

Variants

Three visual styles: default (bordered), soft (muted fill), card (elevated).

default

soft (default)

card

svelte 
<!-- default: bordered card style -->
<List {items} variant="default" />

<!-- soft: subtle muted background (default) -->
<List {items} variant="soft" />

<!-- card: elevated with shadow -->
<List {items} variant="card" />

Density

Control padding with compact, default, or roomy.

compact

default

roomy

svelte 
<List {items} density="compact" />
<List {items} density="default" />
<List {items} density="roomy" />

Columns

Set columns to 1–4 to create a multi-column grid. Responsive: 3- and 4-column grids collapse to 2 columns on small screens.

columns=2

columns=4

svelte 
<List {items} columns={4} />

Disabled items

Set disabled: true on individual items to prevent selection.

Custom render

Provide a children snippet to fully control item rendering.

svelte 
<List {items}>
  {#snippet children(item)}
    <span class="font-bold">{item.label}</span>
    <span class="text-xs text-muted-foreground">{item.description}</span>
  {/snippet}
</List>

API Reference

PropTypeDefaultDescription
items ListItem[]—Array of items to render. Each item: { id, label, description?, disabled? }.
variant 'default' | 'soft' | 'card''soft'Visual style of each list item.
density 'compact' | 'default' | 'roomy''default'Padding preset controlling item height.
columns 1 | 2 | 3 | 41Number of grid columns.
animated booleantrueEnables FLIP reorder and scale enter/exit animations.
onselect (item: ListItem) => void—Callback fired when a non-disabled item is clicked.
children Snippet<[ListItem]>—Custom render snippet — receives the item as argument.
class string—Extra CSS classes merged onto the grid wrapper.