@sebas-dv/shadcn-theme-editor
v0.1.5
Published
Run the shadcn Theme Editor companion server for any dev setup (Next.js, or as a standalone). Serves the live overlay and writes theme changes to your CSS.
Maintainers
sebas-dvReadme
@sebas-dv/shadcn-theme-editor
Run the companion dev server for the live shadcn (Tailwind v4 / OKLCH) theme editor overlay.
Reads your project's theme CSS file, scans @theme, :root, and .dark variables, and surgically writes live changes back to disk using PostCSS.
Quick Start
Run directly with npx in any project with a shadcn theme:
npx @sebas-dv/shadcn-theme-editorBy default, it starts the companion server on http://localhost:7433.
Options
Options:
-p, --port <n> Port to listen on (default 7433)
--root <dir> Project root to scan/write (default: cwd)
--path <file> Force a specific theme CSS file (relative or absolute)
--base <path> API/asset mount prefix (default /__theme-editor__)
--backup Write a .bak copy before overwriting the CSS file
-h, --help Show this helpNext.js Setup
Next.js does not use Vite, so run this companion server alongside next dev:
1. Install packages
pnpm add -D @sebas-dv/shadcn-theme-editor @sebas-dv/shadcn-theme-editor-react2. Update package.json scripts
{
"scripts": {
"dev": "concurrently \"npx @sebas-dv/shadcn-theme-editor\" \"next dev\""
}
}3. Add <ThemeEditor /> to your root layout
// app/layout.tsx
import { ThemeEditor } from "@sebas-dv/shadcn-theme-editor-react";
export default function RootLayout({ children }: { children: React.ReactNode }) {
return (
<html>
<body>
{children}
<ThemeEditor apiBase="http://localhost:7433" />
</body>
</html>
);
}<ThemeEditor /> is strictly disabled in production builds with zero bundle overhead.
Security
Execution is strictly prohibited in production (NODE_ENV=production). The CLI terminates immediately with an error if invoked outside development.
License
MIT © Sebas-DV