previewcn lets you preview different shadcn/ui themes directly in your app - not on pre-built demo components.
previewcn-demo.mp4
# Run in your Next.js app directory:
# - plain Next.js: project root
# - Next.js with `src/`: run inside `src/`
# - monorepo: `cd` into the Next.js app package first
npx previewcn@latest
# Start your dev server
pnpm devThat's it! A floating palette icon will appear in the bottom-right corner of your app.
If npx previewcn@latest doesn't work for your project (complex monorepo structure, custom configurations, etc.), sorry!
But hey - you can install it manually:
1. Run the shadcn add command:
npx -y shadcn@latest add -y https://www.previewcn.com/r/devtools.json --overwrite2. Add the devtools to your layout:
Open your layout.tsx (usually app/layout.tsx or src/app/layout.tsx) and add:
import { PreviewcnDevtools } from "@/components/ui/previewcn"; // add this line
export default function RootLayout({ children }) {
return (
<html lang="en">
<body>
{children}
{process.env.NODE_ENV === "development" && <PreviewcnDevtools />} {/* add this line too! */}
</body>
</html>
);
}- Next.js with App Router
- shadcn/ui configured in your project
- Tailwind CSS v4
previewcn follows the shadcn/ui philosophy - instead of installing an npm package, it installs component files into your project via the shadcn registry:
components/ui/previewcn/
├── index.ts # Main export
├── devtools.tsx # Dev-only wrapper
├── trigger.tsx # Floating action button
├── panel.tsx # Theme editor panel
├── color-picker.tsx # Color preset selector
├── preset-selector.tsx # Theme preset selector
├── radius-selector.tsx # Border radius selector
├── font-selector.tsx # Font selector
├── mode-toggle.tsx # Light/Dark toggle
├── css-export-button.tsx # CSS export button
├── theme-applier.ts # DOM manipulation logic
├── use-theme-state.ts # State management hook
├── css-export.ts # CSS generation utility
└── presets/ # Theme data
├── index.ts
├── colors.ts
├── color-preset-specs.ts
├── theme-presets.ts
├── fonts.ts
└── radius.ts
The CLI also adds the devtools component to your layout.tsx:
import { PreviewcnDevtools } from "@/components/ui/previewcn";
export default function RootLayout({ children }) {
return (
<html lang="en">
<body>
{children}
{process.env.NODE_ENV === "development" && <PreviewcnDevtools />}
</body>
</html>
);
}The component only renders in development mode and is completely removed from production builds.
# Initialize previewcn (default command)
npx previewcn
# Or explicitly
npx previewcn init
# Check setup status
npx previewcn doctor- Pick a preset - Apply a complete theme (colors + radius + font) with one click
- Customize colors - Choose from 18 color presets
- Adjust radius - From none to full rounded corners
- Select font - Pick from 10 Google Fonts
- Toggle mode - Preview light and dark themes
- Export CSS - Copy the generated CSS and paste into your
globals.css
npx previewcn doctorPRs are welcome! This is a monorepo using pnpm workspaces and Turborepo.
# Install dependencies
pnpm install
# Build the CLI
pnpm build
# Run linting
pnpm lint- Theme presets adapted from tweakcn (Apache 2.0)