PreviewFrame

Live preview surface with viewport controls, refresh, and runtime error overlay support.

bunx --bun shadcn@latest add https://shadcn-sandbox.vercel.app/r/preview-frame.json

Preview

import { PreviewFrame } from "@/components/sandbox/preview-frame";

export function PreviewPanel() {
  return (
    <PreviewFrame
      status={previewStatus}
      viewport={viewport}
      onViewportChange={setViewport}
      srcDoc={previewSrcDoc}
      runtimeError={runtimeError}
      onRefresh={refreshPreview}
      onOpenInNewTab={openPreviewInNewTab}
      onDismissError={dismissError}
    />
  );
}