Introduction

Rokkit is a modular, data-driven ecosystem for Svelte, empowering you to build modern, accessible, and beautiful applications with speed and flexibility.

The Rokkit Ecosystem

Rokkit is more than just a UI library—it's a complete ecosystem for Svelte development, consisting of several focused packages:

• @rokkit/ui: Headless, data-driven UI components for lists, forms, tabs, overlays, and more.
• @rokkit/actions: Svelte actions for behaviors, accessibility, and effects.
• @rokkit/states: State management and proxy utilities for reactive data flows.
• @rokkit/themes: Utility-first and semantic theming, with built-in and custom theme support.
• @rokkit/data: Data manipulation and transformation utilities.
• @rokkit/forms: Form generation, validation, and enhanced input components.
• @rokkit/icons: Icon system powered by Iconify.
• @rokkit/cli: Command-line tools for scaffolding and automation.

Why Rokkit?

Rokkit is designed for developers who want to focus on building features, not fighting with component APIs or wrestling data into the right shape. With Rokkit, your data drives the UI—components adapt to your data structures, not the other way around.

• Data-First: Components automatically map to your data, eliminating boilerplate and enabling rapid prototyping.
• Composable & Extensible: Every component is built for extension and composition, so you can override, customize, and compose as needed.
• Unstyled by Default: Rokkit ships with zero styling assumptions. Use your own styles, or start with one of the included themes and extend as you wish.
• Accessible: Accessibility is built in from the start—ARIA roles, keyboard navigation, and focus management are handled for you.
• Developer Experience: Stable, predictable APIs, full TypeScript coverage, and comprehensive documentation help you move fast and stay productive.

Bring Your Own Styles

Most Rokkit components are completely unstyled, giving you full control over your application's look and feel. Use class props or semantic data-* attributes for styling hooks. Rokkit includes a few built-in style packs (like rokkit, material, and minimal), but you can enhance or replace them as you see fit.

Driven by Data

Unlike traditional UI libraries, Rokkit is built around the principle that data should drive the interface. Components adapt to your data structures using a flexible field mapping system, so you spend less time transforming data and more time building features.

• No more writing adapters or mappers for every API response.
• Consistent prop patterns across all components: items, value, fields, and more.
• Composable snippets and overrides for custom rendering.

Building for Developer Experience

Rokkit is designed to let you focus on what matters—your application's functionality. You don't need to learn a new design system or force your data into rigid component contracts. Instead, Rokkit's intuitive patterns and unstyled-by-default approach let you build apps quickly, with minimal friction and maximum flexibility.

• Rapid prototyping with minimal boilerplate.
• Easy to learn, easy to extend.
• Comprehensive documentation and real-world examples.
• Unopinionated about styling—bring your own, or use a starter theme.

Production-Ready Accessibility

Accessibility is not an afterthought in Rokkit. All interactive components are WAI-ARIA compliant, support keyboard navigation, and include focus management and screen reader support out of the box.