Composability

Every Rokkit component exposes named snippet slots. Pass a snippet to replace any part of the component's rendering — item content, group headers, empty states — without forking the component or fighting with CSS overrides.

Overview

Svelte 5 snippets are the clean equivalent of render props or slot content. They keep your customization logic co-located with your usage, not inside the library.

Snippets & Customization

Svelte snippets give you full control over how each item renders — without wrapping components or forking source code. The component handles data logic, keyboard navigation, and ARIA; you control the pixels.

Item Snippets

Every collection component accepts an itemContent snippet that receives a ProxyItem. Use proxy.label, proxy.icon, and proxy.get('field') to access mapped values:

The ProxyItem API

Snippets receive a ProxyItem instance that provides a unified interface to the underlying data, regardless of whether it's an object or a primitive:

Per-Item Snippets

Set item.snippet = 'name' to route specific items to named snippets. Items without a snippet field use the default itemContent snippet:

Group Snippets

For nested data, use groupContent to customize how group headers render:

Per-Item Components

Map a component field to render entirely different Svelte components for different items:

Interactive Snippets

Snippets support full Svelte reactivity. Embed checkboxes, toggles, or inputs inside list items. Use e.stopPropagation() on the control's click to prevent the List from also triggering item selection: