This guide takes you from a fresh SvelteKit project to a working Rokkit app with navigation, selection, and theming in about ten minutes.

1. Create a SvelteKit project

If you don't have a project yet:

bash

Highlighting code...

2. Install Rokkit

bash

Highlighting code...

3. Configure UnoCSS

Create or update uno.config.js at your project root. The presetRokkit helper registers the color system and semantic icon names:

javascript

Highlighting code...

4. Add theme CSS

In src/app.css:

css

Highlighting code...

In src/app.html, add data-style and data-mode to <html>:

<html data-style="rokkit" data-mode="dark">

5. Build your first page

Create src/routes/+page.svelte. Every Rokkit component follows the same pattern — pass items, tell it which fields to use, bind the selected value:

svelte

Highlighting code...

6. Add the theme switcher

Drop ThemeSwitcherToggle from @rokkit/app anywhere in your layout to give users light/dark/system control:

svelte

Highlighting code...

Next steps

Data Binding — field mapping, nested data, data sources
Composability — snippets, per-item rendering
Theming — color system, custom themes, dark mode
Components — full reference for List, Select, Tree, Table, and more