@sebas-dv/shadcn-theme-editor-react
v0.1.5
Published
Drop-in <ThemeEditor/> React component that mounts the shadcn theme-editor overlay (for Next.js and other React apps).
Maintainers
sebas-dvReadme
@sebas-dv/shadcn-theme-editor-react
Drop-in <ThemeEditor /> React component that mounts the live shadcn theme editor overlay in Next.js (App & Pages Router) and other React applications.
Installation
pnpm add -D @sebas-dv/shadcn-theme-editor-react @sebas-dv/shadcn-theme-editor
# or: npm i -D @sebas-dv/shadcn-theme-editor-react @sebas-dv/shadcn-theme-editorUsage (Next.js App Router)
1. Start the companion server
Add the companion to your dev script in package.json:
{
"scripts": {
"dev": "concurrently \"npx @sebas-dv/shadcn-theme-editor\" \"next dev\""
}
}2. Place <ThemeEditor /> in 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 lang="en">
<body>
{children}
<ThemeEditor apiBase="http://localhost:7433" />
</body>
</html>
);
}Zero Production Overhead Guarantee
<ThemeEditor /> verifies NODE_ENV === "production" and immediately returns null before loading any code. In production builds, Next.js / bundlers completely tree-shake and dead-code eliminate (DCE) the overlay bundle.
Props
| Prop | Type | Default | Description |
| -------------- | --------- | --------------------- | -------------------------------------------------------------- |
| apiBase | string | "" | Origin of the companion server (e.g. http://localhost:7433). |
| basePath | string | "/__theme-editor__" | Endpoint mount prefix. |
| autoOpen | boolean | false | Open panel initially (if not already minimized). |
| persistState | boolean | true | Persist minimized state in localStorage. |
| enabled | boolean | true in dev | Force disable with enabled={false}. |
License
MIT © Sebas-DV