@sebas-dv/shadcn-theme-editor-vite

Official Vite plugin for the live shadcn Theme Editor.

Covers Vite (Vanilla, React, Vue, Svelte), Laravel + Inertia, TanStack Start, Astro, Remix, and SvelteKit.

Installation

pnpm add -D @sebas-dv/shadcn-theme-editor-vite
# or: npm i -D @sebas-dv/shadcn-theme-editor-vite

Setup

1. Plain Vite Apps

// vite.config.ts
import { defineConfig } from "vite";
import { shadcnThemeEditor } from "@sebas-dv/shadcn-theme-editor-vite";

export default defineConfig({
  plugins: [shadcnThemeEditor()],
});

Projects with an index.html have the overlay script injected automatically.

2. Laravel + Inertia

// vite.config.ts
import { defineConfig } from "vite";
import laravel from "laravel-vite-plugin";
import { shadcnThemeEditor } from "@sebas-dv/shadcn-theme-editor-vite";

export default defineConfig({
  plugins: [laravel(["resources/js/app.tsx"]), shadcnThemeEditor()],
});

// resources/js/app.tsx
import "virtual:shadcn-theme-editor"; // Mounts in dev; no-op in production

Options

| Option | Type | Default | Description | | -------------- | --------- | --------------------- | -------------------------------------------------- | | cssPath | string | auto-detected | Custom path to the theme CSS file. | | basePath | string | "/__theme-editor__" | API mount prefix. | | autoOpen | boolean | false | Open panel instead of launcher button. | | persistState | boolean | true | Preserve minimized state across page reloads. | | backup | boolean | false | Write a .bak backup copy before writing changes. | | inject | boolean | true | Auto-inject overlay script into index.html. |

Security

The plugin uses apply: "serve" and strictly disables all middleware and scripts during production builds (NODE_ENV === "production"), ensuring zero overhead.

License

MIT © Sebas-DV