Product frame
ProShows a real screen of your product on a marketing page: the content renders at app width and scales to fit inside a quiet window frame, with optional tilt and fade. Live components, never a stale screenshot.
npx prodular-ui add product-framePart of Prodular UI Pro. Preview and read the docs freely, install with a license. See pricing
A live screen
An invoice list laid out at 960px and scaled to the frame.
import { Badge } from "@/components/ui/badge"import { ProductFrame } from "@/components/ui/product-frame"
export default function ProductFrameWindow() { return ( <ProductFrame address="app.relay.com/invoices" contentWidth={960} aspect={16 / 8} className="w-full max-w-2xl"> <div className="flex h-full flex-col gap-4 bg-background p-8 text-sm"> <h2 className="text-lg font-semibold">Invoices</h2> <ul className="divide-y rounded-xl border bg-card"> {[["INV-2104", "Northwind Logistics", "Paid", "$5,900"], ["INV-2103", "Kestrel Health", "Due Friday", "$8,420"], ["INV-2102", "Ironclad Security", "Overdue", "$18,647"]].map(([id, c, s, a]) => ( <li key={id} className="flex h-12 items-center gap-4 px-4"> <span className="w-20 font-mono text-muted-foreground">{id}</span> <span className="flex-1">{c}</span> <Badge variant={s === "Paid" ? "success" : s === "Overdue" ? "destructive" : "info"}>{s}</Badge> <span className="w-20 text-right font-medium tabular-nums">{a}</span> </li> ))} </ul> </div> </ProductFrame> )}Anatomy
<ProductFrame address="app.relay.com" tilt fade label="The overview"> <DashboardPreview /></ProductFrame>Guidance
Use it when
- Heroes and feature sections that show the product.
- tilt and fade in a centered hero.
Avoid
- Small frames under about 400px wide; the scaled text gets too small to read.
- Interactive demos. The content is inert on purpose.
Rules for AI agents
Published in llms-full.txt, the registry and the MCP server, so coding agents follow them when they build with this component.
- Render live components or an iframe of your app inside. Pick contentWidth as the width your screen was designed for.
- Pass label with what the screen shows; the content itself is hidden from assistive tech.
API
ProductFrame
| Prop | Type | Default | Description |
|---|---|---|---|
| contentWidth / aspect | number | 1280 / 16:10 | Layout width before scaling and the frame's shape. |
| chrome / address | "window" | "none" / string | "window" | The top bar and its address. |
| tilt / fade | boolean | false | Lean back and fade into the page. |
| label | string | What the screen shows. |
Installation
The Prodular UI CLI adds the source to components/ui with everything it depends on. In a project that already uses shadcn/ui, the shadcn CLI installs it from the Prodular registry too. See Installation for the first setup.
npx prodular-ui add product-frame# or, with the registry in components.jsonnpx shadcn@latest add @prodular/product-frame