Components

List component

On this page

The kit:list and kit:list-item components render structured vertical lists. Items are interactive automatically when onclick is attached or href is set.

<script lang="ts">
	import { Inbox, Send, Archive, Trash2, Star } from 'lucide-svelte';

	const items = [
		{ icon: Inbox, label: 'Inbox', count: 12 },
		{ icon: Star, label: 'Starred', count: 3 },
		{ icon: Send, label: 'Sent' },
		{ icon: Archive, label: 'Archive' },
		{ icon: Trash2, label: 'Trash' }
	];

	let active = $state('Inbox');
</script>

<kit:list style="max-width: 240px;">
	{#each items as item (item.icon)}
		<kit:list-item is="button" active={active === item.label} onclick={() => (active = item.label)}>
			{#snippet prepend()}
				{@const Icon = item.icon}
				<kit:icon><Icon /></kit:icon>
			{/snippet}
			{item.label}
			{#if item.count}
				{#snippet append()}
					<kit:chip variant="filled" size="xs" labelStyle>{item.count}</kit:chip>
				{/snippet}
			{/if}
		</kit:list-item>
	{/each}
</kit:list>

kit:list is a layout container that sets size tokens consumed by its kit:list-item children. kit:list-item detects its tag automatically: it renders as <a> when href is set, <button> when an onclick is attached, or <div> otherwise.

Examples of list

Variants

Shows visual variants (filled, text, outline) to adapt the overall appearance of the list to graphic needs.

filled (default): solid background.
outline: visible border.
text : transparent background.
variant: 'filled' | 'outline' | 'text' = 'filled'

<div style="display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem;">
	{#each ['filled', 'outline', 'text'] as variant (variant)}
		<kit:list {variant}>
			<kit:list-item is="button">Item one</kit:list-item>
			<kit:list-item is="button" active>Item two</kit:list-item>
			<kit:list-item is="button">Item three</kit:list-item>
		</kit:list>
	{/each}
</div>

prepend and append

kit:list-item supports prepend and append snippets for icons, avatars, badges, or any inline content.

prepend: Snippet | undefined = undefined
append: Snippet | undefined = undefined

<script lang="ts">
	import { User, Mail, Phone, ChevronRight } from 'lucide-svelte';
</script>

<kit:list style="max-width: 280px;">
	<kit:list-item is="button">
		{#snippet prepend()}<kit:icon><User /></kit:icon>{/snippet}
		Profile
		{#snippet append()}<kit:icon size="sm"><ChevronRight /></kit:icon>{/snippet}
	</kit:list-item>
	<kit:list-item is="button">
		{#snippet prepend()}<kit:icon><Mail /></kit:icon>{/snippet}
		Email
		{#snippet append()}<kit:icon size="sm"><ChevronRight /></kit:icon>{/snippet}
	</kit:list-item>
	<kit:list-item is="button">
		{#snippet prepend()}<kit:icon><Phone /></kit:icon>{/snippet}
		Phone
		{#snippet append()}<kit:icon size="sm"><ChevronRight /></kit:icon>{/snippet}
	</kit:list-item>
</kit:list>

nav

Add nav to kit:list (and is="nav") for a navigation list. This increases padding and sets role="navigation" on the container.

nav: boolean = false

<kit:list is="nav" nav style="max-width: 200px;">
	<kit:list-item href="/docs">Documentation</kit:list-item>
	<kit:list-item href="/docs/components" active>Components</kit:list-item>
	<kit:list-item href="/docs/hooks">Hooks</kit:list-item>
	<kit:list-item href="/docs/hooks" disabled>Changelog</kit:list-item>
</kit:list>

Without preprocess Lapikit

If you aren’t using the Lapikit preprocessor in svelte.config.js, import the components directly:

import { List, ListItem } from 'lapikit/components';

API Reference

kit:list

props	type	description	default
ref $bindable	`HTMLElement`	Bindable reference to the rendered DOM element.	`null`
is	enum	HTML element to render.	`'div'`
s-class	enum	Sets className on list.
s-style	enum	Sets styles on list.
variant	enum	Visual style.	`'filled'`
size	enum	Item height, padding, and font size tokens.	`'md'`
density	enum	Vertical density offset applied to item height.	`'default'`
rounded	enum	Border radius on list items children.	`'md'`
nav	`boolean`	Navigation mode more padding, `role="navigation"`.	`false`
color	`string`	Foreground color override (`--kit-list-item-fg`).
background	`string`	Background color override (`--kit-list-item-bg`).
children	`Snippet`	List items.

kit:list-item

props	type	description	default
ref $bindable	`HTMLElement`	Bindable reference to the rendered DOM element.	`null`
is	enum	HTML element. Overridden by `href` or `onclick`.	`'div'`
s-class	enum	Sets className on list item.
s-style	enum	Sets styles on list item.
href	`string`	Renders as `<a>`. Cleared when `disabled`.
active	`boolean`	Applies the active background.	`false`
disabled	`boolean`	Dims and blocks interaction.	`false`
noRipple	`boolean`	Disables the ripple animation.	`false`
interactive	`boolean`	Force effect hover and active	`false`
color	`string`	Foreground color override (`--kit-list-item-fg`).
background	`string`	Background color override (`--kit-list-item-bg`).
prepend	`Snippet`	Content before the label.
append	`Snippet`	Content after the label.
children	`Snippet`	Item label.

A well-structured kit:list can easily be enriched with Separators or elements in a Card.