Founding price: $35, then $79.99 after 23:59 UTC on 4 November, then $79.99
Get ProA notched laptop drawn in CSS that shows children or an image on its screen and can open its lid on scroll.
Derived from this item’s props table, because it declares no controls of its own. Changes drive the preview live.
import { LaptopFrame } from "@/components/ui/laptop-frame"<LaptopFrame className="max-w-3xl" screenWidth={1280} openAnimation="in-view">
<Dashboard />
</LaptopFrame><LaptopFrame src="/screenshot.png" alt="Acme dashboard" variant="midnight" />| Prop | Type | Default | Description |
|---|---|---|---|
children | ReactNode | - | Screen content. Ignored when src or videoSrc is set. Without any content a placeholder shows. |
src | string | - | Image shown on the screen, cropped to fill it. |
alt | string | "" | Alternative text for src. |
videoSrc | string | - | Muted, looping video shown on the screen. Does not autoplay under reduced motion. |
poster | string | - | Poster image for videoSrc. |
variant | "auto" | "silver" | "midnight" | "auto" | Finish. "auto" is silver in light mode and midnight in dark mode. |
screenWidth | number | - | Lays children out at this width in CSS pixels, then scales them to fit the screen. |
openAnimation | "none" | "in-view" | "scroll" | "none" | Opens the lid once when scrolled into view, or ties the hinge to scroll position. |
screenClassName | string | - | Class names for the screen area inside the bezel. |
Also accepts all <div> props.
className (for example max-w-3xl) and everything scales with it.