Getting Started
Rokkit is a data-first Svelte 5 component library. Every component accepts your data's natural shape through a simple field mapping — no adapters, no transformations, no boilerplate.
Introduction
Most UI libraries define rigid data contracts. You reshape your API responses to fit their expectations. Rokkit flips this: you tell it which fields in your data map to which roles in the UI, and it adapts.
Data-First
Components adapt to your data shape via field mapping. No transformations, no boilerplate.
Composable
Customize any component with Svelte snippets. Full control over rendering without forking.
Accessible
Keyboard navigation and ARIA support built in via the navigator pattern. Zero config.
Themeable
Data-attribute hooks with clean layout/theme CSS separation. Build or swap themes freely.
Consistent API
Every component follows the same pattern: items, fields, value, onchange. Learn once, use everywhere.
Svelte 5 Native
Built on runes, snippets, and $state. No legacy patterns, no compatibility layers.
How It Works
Pass any data structure and a fields mapping. The same pattern works identically across
List, Select, Table, Tabs, Menu, and every other component.
Community
Rokkit is open source and welcomes contributions. File issues, submit pull requests, or start a discussion on GitHub.
Installation
Get up and running with Rokkit in minutes. Install the packages, add the theme, and build your first data-driven component.
Install Rokkit UI and the default theme:
Or with other package managers:
Theme Setup
Import the Rokkit theme CSS in your app's entry point. The base CSS provides layout rules, and
the theme CSS adds visual styling via data-* selectors.
UnoCSS Integration
Rokkit uses UnoCSS for its semantic color system. Add the Rokkit theme rules to your UnoCSS config:
Your First Component
Every Rokkit component follows the same pattern: pass your data as items, tell the
component which fields to use via fields, and bind the selected value.
That's it — no data transformation, no adapter layer. The fields prop maps your name property to the display text and id to the selection value.
Same Pattern, Every Component
The identical items + fields pattern works across all Rokkit components.
Switch from a List to a Select or Table by changing one import:
Quick Start
The fastest way to add Rokkit to an existing SvelteKit project is with the CLI:
The CLI sets up UnoCSS, imports theme CSS, and adds data-style to <html> automatically. See the Quick Start guide for a full step-by-step walkthrough.