Rokkit components accept any JavaScript array as items. Because Svelte 5 tracks reactivity through $state, passing a reactive array is all that's needed — the component re-renders automatically when the array changes.

Static arrays

Plain arrays work without any wrapping:

Reactive state

Wrap the array in $state and mutations are tracked automatically. Add, remove, or reorder items and every bound component updates:

Async data

Fetch data into a $state variable. While loading, pass an empty array; replace it when the promise resolves:

Derived data

Use $derived to filter or transform before passing to a component. The component re-renders only when the derived value changes:

For form-driven lookups (dependent dropdowns, remote search), see the Forms section which provides a dedicated lookup system with caching and dependency tracking.