The button doesn't show up
- Not in development.
<ThemeEditor />renders only whenNODE_ENVisdevelopment: innext devorvite, not innext start,vite previewor a deploy. - Not rendered. Check that
<ThemeEditor />is in the root layout (Next) or next to your app inmain.tsx(Vite), and not inside a route that is not open.
"HTTP 404. Is the @slabui/theme-react plugin in your config?"
The editor opened, but the theme server didn't answer: the plugin is missing.
Add withTheme to next.config.ts or themes() to vite.config.ts
(see Installation) and
restart the dev server: config files are read only at startup.
"only local requests are allowed" (403)
The theme server answers only requests to localhost, 127.0.0.1 or [::1],
from a page on one of them. It returns 403 when you open the app through a
network IP (http://192.168.0.10:3000), a tunnel or a container's host name.
Open it at http://localhost:<port> instead.
"set the css option or the css field in slabui.json"
The plugin doesn't know where your theme is. Run
slabui init in the project, or set the
css option of the plugin (Next.js,
Vite).
"CSS file not found"
The css field of slabui.json, or the css option, points to a file that
doesn't exist. Paths are relative to the folder where the dev server runs; in a
monorepo, that's the app's folder. See the
options for Next.js or
Vite.
"Cannot find module '@slabui/theme-react'"
- Old version. The root import is available from
0.0.2forThemeEditor, and from0.0.3forthemeAttribute. Update the package, or import the editor from@slabui/theme-react/editorand the theme attribute from@slabui/theme-core/attribute. - Old module resolution. The package exposes its entries with
exports. TypeScript ignoresexportswith"moduleResolution": "node"(ornode10); use"bundler","node16"or"nodenext"in yourtsconfig.json.
"dynamic usage of require is not supported" (Next with Turbopack)
Versions up to 0.0.2 bundled a CommonJS package in the editor, which Turbopack
rejects in the browser. Update @slabui/theme-react to 0.0.3 or later.
Sign in doesn't finish
Sign in with the browser opens the SlabUI login in a new tab and the editor waits for it. If it keeps waiting:
- Finish the login in the tab that opened, then come back to your app.
- Or sign in from the terminal with
npx slabui loginand reopen the editor: both use the same token. - With
SLABUI_TOKENset in the environment of the dev server, that token is used instead of the saved one.
My dark mode colors don't show up
The editor works with dark mode by the dark class, Tailwind's default. Projects
that switch dark mode another way, such as a data-theme attribute or only the
system preference, don't get their dark colors in the editor yet.
My change was overwritten
While the editor is open, changes made outside it (your code editor,
git checkout, slabui add) show up in it, but your draft keeps winning. If a
file changed a variable that is also in your draft, the footer says so: click
Discard to drop the draft and keep the file, or Save theme
to keep the draft.
On This Page
The button doesn't show up"HTTP 404. Is the @slabui/theme-react plugin in your config?""only local requests are allowed" (403)"set thecss option or the css field in slabui.json""CSS file not found""Cannot find module '@slabui/theme-react'""dynamic usage of require is not supported" (Next with Turbopack)Sign in doesn't finishMy dark mode colors don't show upMy change was overwritten