Get up and running with Rokkit in minutes. Install the packages, add the theme, and build your first data-driven component.
Installation
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: