previewcn Devtools

Install it

Source

1"use client";
2 
3import { lazy, Suspense, useState } from "react";
4 
5import { Trigger } from "./trigger";
6 
7const Panel = lazy(() => import("./panel"));
8 
9// Check if we're in development mode
10const IS_DEV = process.env.NODE_ENV === "development";
11 
12function DevtoolsInner() {
13  const [open, setOpen] = useState(false);
14 
15  return (
16    <>
17      {!open && <Trigger onClick={() => setOpen(true)} />}
18      {open && (
19        <Suspense fallback={null}>
20          <Panel onClose={() => setOpen(false)} />
21        </Suspense>
22      )}
23    </>
24  );
25}
26 
27export function PreviewcnDevtools() {
28  if (!IS_DEV) return null;
29 
30  return <DevtoolsInner />;
31}

What it pulls in

Other registry items

• utils

Files it writes

• registry/previewcn/index.ts
• registry/previewcn/devtools.tsx
• registry/previewcn/panel.tsx
• registry/previewcn/trigger.tsx
• registry/previewcn/color-picker.tsx
• registry/previewcn/preset-selector.tsx
• registry/previewcn/radius-selector.tsx
• registry/previewcn/font-selector.tsx
• registry/previewcn/mode-toggle.tsx
• registry/previewcn/css-export-button.tsx
• registry/previewcn/theme-applier.ts
• registry/previewcn/use-theme-state.ts
• registry/previewcn/css-export.ts
• registry/previewcn/presets/index.ts
• registry/previewcn/presets/colors.ts
• registry/previewcn/presets/color-preset-specs.ts
• registry/previewcn/presets/radius.ts
• registry/previewcn/presets/fonts.ts
• registry/previewcn/presets/theme-presets.ts