The Rokkit CLI automates project setup and ongoing maintenance. It handles config file generation, dependency verification, and icon bundling.
Installation
Run without installing using npx, or install globally to use rokkit directly:
rokkit init
Interactive setup for an existing SvelteKit project. Run from the project root. Prompts you for palette, icon collections, theme styles, and theme switching mode:
Prompts
| Prompt | Type | Choices |
|---|---|---|
palette | select | default (orange/pink/sky), vibrant (blue/purple/sky), seaweed (sky/green/blue), custom |
primary / secondary / accent / surface | text | Tailwind palette names — only shown when palette is custom |
icons | select | rokkit (built-in only), custom (add a custom collection) |
iconPath | text | Path to custom icon JSON — only shown when icons is custom |
themes | multiselect | rokkit (default), minimal, material |
switcher | select | system (prefers-color-scheme), manual (light/dark toggle), full (light/dark + style variants) |
Files written
| File | What happens |
|---|---|
rokkit.config.js | Written with your color palette, themes, and switcher settings. Skipped if it already exists. |
uno.config.js | Written with presetRokkit(). Skipped if already present — run rokkit doctor for migration hints. |
src/app.css | Prepends @unocss/reset/tailwind.css, @rokkit/themes/dist/base,
and each selected theme (e.g. @rokkit/themes/dist/rokkit). Creates the file
if missing. |
src/app.html | Injects a flash-prevention script after <body> to restore saved
theme/mode before paint. Skipped when switcher is system or when already present. |
Generated rokkit.config.js
This file is read automatically by presetRokkit() — no arguments needed in your UnoCSS
config:
Generated app.css imports
rokkit doctor
Validates your Rokkit setup is correctly configured. Run when something looks broken or after manual changes:
Checks
| ID | What it verifies | Auto-fixable |
|---|---|---|
config-exists | rokkit.config.js present | Yes — generates an empty config |
uno-uses-preset | uno.config.js uses presetRokkit() | No — manual fix required |
css-imports | app.css has @rokkit/themes/dist/base import | Yes — prepends missing imports |
html-init-script | app.html has flash-prevention script | Yes — injects script after <body> |
Exit codes: 0 = all checks pass, 1 = one or more failures.
Manual fix: uno-uses-preset
doctor --fix will not overwrite an existing uno.config.js. Add presetRokkit manually:
rokkit upgrade
Check for available updates to all @rokkit/* packages in your project. Compares installed
versions against the latest published releases:
Without --apply, upgrade prints a diff and the install command to run. With --apply, it detects your package manager (bun, pnpm, yarn, or npm from lockfiles)
and runs the install automatically.
rokkit skin
Manage color skins — named palettes defined in rokkit.config.js. A skin maps each
semantic color role to a Tailwind palette name:
skin create adds a scaffold entry with all nine token keys (primary, secondary, accent, surface, success, warning, danger, error, info) set to default
color names. Edit the values then activate with data-skin="<name>":
rokkit theme
Manage visual styles — full CSS theme files that control every component's appearance. Built-in
themes come from @rokkit/themes; custom themes live in src/themes/:
theme create generates a complete CSS stub at src/themes/<name>.css with one [data-style='<name>'] block for every component. Import it in src/app.css and activate with data-style="<name>" on the body:
Icon Tools
For icon library authors. Bundle your own SVG folders into Iconify-compatible JSON files. Not required for standard Rokkit projects.
| Command | Output | Use when |
|---|---|---|
rokkit bundle | One JSON file per subfolder | Embedding icons in an app |
rokkit build | Full Iconify package (with prefix, icons, width/height) | Publishing as a standalone package |
| Flag | Short | Default | Description |
|---|---|---|---|
--input | -i | ./src | Source folder with SVG subfolders |
--output | -o | ./lib | Output folder for JSON files |
--config | -c | config.json | Config file relative to input folder |
Related
- Quick Start — step-by-step from install to first component
- Icon Sets — available collections and UnoCSS integration