List

The List component is a flexible component for rendering ordered or unordered lists from an array of items.

Props

Prop	Type	Default	Description
`type`	`'ol' \| 'ul'`	`'ul'`	Specifies the type of list to render.
`items`	`Array<T>`	`[]`	An array of items to be rendered.
`itemTemplate`	`Snippet<[T, number]>`	`required`	A Svelte snippet used to render each item. Receives item and index.
`class`	`string`	`''`	Custom CSS classes for the list element.
`itemClass`	`string`	`''`	Custom CSS classes for each list item (li).
`overrideDefaultStyling`	`boolean`	`false`	If true, removes default fluid styling.
`...rest`	`HTMLAttributes`	`—`	Standard HTML list attributes.

A basic unordered list with default markers.

<List items={fruitItems}>

  {#snippet itemTemplate(item)}

    {item}

  {/snippet}

</List>

A numbered list using the "ol" type prop.

<List type="ol" items={numberItems}>

  {#snippet itemTemplate(item)}

    Step {item}

  {/snippet}

</List>

Styling individual items using the itemClass prop.

<List

  items={fruitItems}

  itemClass="p-2 bg-neutral-100 rounded list-none"

  {#snippet itemTemplate(item)}

    {item}

  {/snippet}

</List>

Rendering objects with custom logic in the snippet.

<List items={tasks}>

  {#snippet itemTemplate(item)}

    <Text class={item.completed ? 'line-through' : ''}>{item.text}</Text>

  {/snippet}

</List>