Viewport Preview Overlay

1"use client";
2
3import { ViewportPreviewOverlay } from "@/registry/ui/viewport-preview-overlay";
4
5const DEMO_FEATURES = [
6  {
7    title: "Ship faster",
8    description: "Composable blocks you can drop into any layout.",
9  },
10  {
11    title: "Stay responsive",
12    description: "Breakpoints tuned for mobile, tablet, and desktop.",
13  },
14  {
15    title: "Preview early",
16    description: "Check layouts before you deploy to production.",
17  },
18];
19
20export function ViewportPreviewOverlayExample() {
21  return (
22    <>
23      <div className="relative mx-auto w-full max-w-4xl space-y-6 rounded-lg border border-dashed border-border p-6">
24        <p className="text-sm text-muted-foreground">
25          Add{" "}
26          <code className="rounded bg-muted px-1.5 py-0.5 font-mono text-xs">
27            ViewportPreviewOverlay
28          </code>{" "}
29          to your root layout (dev-only by default). The floating control is
30          fixed to the viewport - not only this preview box. Toggle with{" "}
31          <kbd className="rounded border bg-muted px-1.5 py-0.5 font-mono text-xs">
32            ⌘
33          </kbd>{" "}
34          /{" "}
35          <kbd className="rounded border bg-muted px-1.5 py-0.5 font-mono text-xs">
36            Ctrl
37          </kbd>{" "}
38          +{" "}
39          <kbd className="rounded border bg-muted px-1.5 py-0.5 font-mono text-xs">
40            Shift
41          </kbd>{" "}
42          +{" "}
43          <kbd className="rounded border bg-muted px-1.5 py-0.5 font-mono text-xs">
44            V
45          </kbd>{" "}
46          or click Viewports in the bottom-right.
47        </p>
48
49        <div className="rounded-xl border bg-card p-6 sm:p-8">
50          <p className="text-xs font-medium uppercase tracking-wider text-muted-foreground">
51            Sample page
52          </p>
53          <h2 className="mt-2 font-heading text-2xl font-semibold sm:text-3xl">
54            Build once, preview everywhere
55          </h2>
56          <p className="mt-3 max-w-2xl text-sm text-muted-foreground sm:text-base">
57            Use the overlay to switch between device frames and spot responsive
58            issues without leaving your dev server.
59          </p>
60
61          <div className="mt-8 grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
62            {DEMO_FEATURES.map((feature) => (
63              <div
64                key={feature.title}
65                className="rounded-lg border bg-background p-4"
66              >
67                <h3 className="text-sm font-semibold">{feature.title}</h3>
68                <p className="mt-1 text-sm text-muted-foreground">
69                  {feature.description}
70                </p>
71              </div>
72            ))}
73          </div>
74        </div>
75      </div>
76
77      <ViewportPreviewOverlay />
78    </>
79  );
80}