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.
Why Rokkit?
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.
Where to go next
Pick a topic or jump straight to a component: