List component

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

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'

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

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

Without preprocess Lapikit

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

API Reference

kit:list

props	type	description	default
is	enum	HTML element to render.	`'div'`
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.	`'md'`
nav	`boolean`	Navigation mode more padding, `role="navigation"`.	`false`
color	`string`	Foreground color override (`--kit-list-fg`).
background	`string`	Background color override (`--kit-list-bg`).
children	`Snippet`	List items.

kit:list-item

props	type	description	default
is	enum	HTML element. Overridden by `href` or `onclick`.	`'div'`
href	`string`	Renders as `<a>`. Cleared when `disabled`.
active	`boolean`	Applies the active background.	`false`
disabled	`boolean`	Dims and blocks interaction.	`false`
rounded	enum	Per-item border radius override.	`'sm'`
noRipple	`boolean`	Disables the ripple animation.	`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.