@previewcn/devtools
v0.1.12
Published
Embedded devtools for PreviewCN - real-time shadcn/ui theme preview inside your app
Maintainers
taishikatoReadme
@previewcn/devtools
Embedded devtools for PreviewCN - real-time shadcn/ui theme preview inside your app.
Features
- 🎨 In-app theme editor - No iframe, no separate server
- 🎯 DevTools-style UI - Click the palette icon to open
- 💾 Persistent settings - Theme choices saved in localStorage
- 🚀 Production-safe - Automatically excluded in production builds
- ⚡ Lazy-loaded - Panel only loads when opened
Installation
# Using pnpm
pnpm add -D @previewcn/devtools
# Using npm
npm install -D @previewcn/devtools
# Using yarn
yarn add -D @previewcn/devtoolsOr use the CLI:
npx previewcn init --devtoolsUsage
Add to your app/layout.tsx:
import "@previewcn/devtools/styles.css";
import { PreviewcnDevtools } from "@previewcn/devtools";
export default function RootLayout({ children }: { children: React.ReactNode }) {
return (
<html lang="en">
<body>
{process.env.NODE_ENV === "development" && <PreviewcnDevtools />}
{children}
</body>
</html>
);
}How It Works
- A small palette icon appears in the bottom-right corner of your app
- Click it to open the theme editor panel
- The theme is applied only after user interaction (opening the panel / changing settings)
- Changes are applied directly to your app in real-time
- Settings are persisted in localStorage
License
MIT