Utilities

Rokkit's interactivity is built on two composable primitives: controllers (pure state machines with no DOM dependency) and the navigator Svelte action (which binds a controller to the DOM, adds keyboard handlers, and manages ARIA attributes).

The separation means you can use a controller in tests without a browser, and swap the visual rendering without touching the interaction logic. It also means you can build your own accessible components by reusing the same controllers Rokkit uses internally.

State Management

Rokkit components use Svelte 5's $state and $bindable runes for clean, predictable state management. Every component follows the same binding pattern.

Value Binding

All selection components expose a value prop that can be bound. The value corresponds to the value field from your data (or the item itself for primitives):

Change Events

Use onchange or onselect for side effects when selection changes. The callback receives the new value:

Controlled vs Uncontrolled

Components work in both modes:

• Uncontrolled — Omit bind:value. The component manages its own state internally. Use onchange to react to changes.
• Controlled — Use bind:value to sync state with your application. The component and your state stay in sync automatically.

Multi-Selection

MultiSelect binds an array of values:

Tabs and Toggle

Tabs and Toggle also use bind:value with the same pattern:

Navigator

The navigator Svelte action connects a controller to a container element. It intercepts keyboard events, routes them through the controller, and syncs the DOM focus and ARIA state in response.

Usage

<ul use:navigator={{ controller, onselect }}>

Full API reference and examples coming soon.

Controllers

Controllers are plain JavaScript objects that manage interaction state — which item is focused, what is selected, whether groups are expanded. They have no DOM dependency and can be tested without a browser.

Available Controllers

• ListController — flat and grouped list navigation with single/multi-select
• NestedController — tree navigation with expand/collapse
• TabularController — row/column navigation for data tables

Full API reference and examples coming soon.

Icons

Rokkit uses semantic icon names that you map to actual icon classes in your UnoCSS configuration. This lets you swap icon sets project-wide without changing component code.

Global Icon Mapping

Define your icon mapping in your uno.config.js using the Rokkit theme helper. Components reference icons by semantic name (e.g., expand, check), and you decide which actual icon to use:

Semantic Icon Names

Components use these semantic names internally. Map each to your preferred icon:

Per-Component Overrides

Override icons for a specific component instance without affecting global defaults. Pass an icons prop with the names you want to change:

Item-Level Icons

Map an icon field in your data to display per-item icons. The icon value should be a UnoCSS icon class:

Icon Collections

Rokkit works with any UnoCSS icon collection. Popular choices:

• @iconify-json/solar — Solar icon set (used by default Rokkit theme)
• @iconify-json/lucide — Clean, minimal line icons
• @iconify-json/mdi — Material Design Icons
• @iconify-json/heroicons — Heroicons by Tailwind

Connector

The Connector component is a versatile utility that helps display connecting lines in nested tree views. It provides visual cues that help users understand the hierarchical relationships between items in tree structures.

Full reference and interactive demo available on the Connector page.

Custom Primitives

Coming soon.