Rokkit separates layout CSS from visual theme CSS using data-* attribute selectors. This
clean architecture makes it easy to customize, override, or build entirely new themes.
Theme Architecture
Every Rokkit component uses two layers of CSS:
- Base (layout) — Positioning, sizing, spacing. Rarely needs changing.
- Theme (visual) — Colors, borders, shadows, transitions. Swap or override freely.
Data-Attribute Hooks
Components expose styling hooks via data-* attributes instead of class names. This avoids
naming collisions and makes selectors self-documenting:
Common State Attributes
Components share a consistent set of state attributes across all components:
| Attribute | When Present | Components |
|---|---|---|
data-selected | Item is selected | List, Select, Tabs, Toggle |
data-focused | Item has keyboard focus | All navigable |
data-disabled | Item is disabled | All |
data-expanded | Group is expanded | List, Tree, Select |
data-open | Dropdown is open | Select, Menu |
Building a Custom Theme
Create your own theme by writing CSS that targets data attributes. Start by copying the Rokkit theme and modifying colors, borders, and transitions:
Skins
Skins apply a color palette override on top of the active theme, without changing the visual
personality. A skin changes colors; data-style changes the visual style (gradients, shadows, border-radius). Add a skin class to any ancestor element:
Component-Level Styling
Every component accepts a class prop for adding custom CSS classes. Use this for one-off
adjustments without creating new theme rules:
Related
- Color System — z-depth tokens, palettes, dark mode
- Whitelabeling — brand palette overrides
- Icon Sets — icon collections and configuration