Laptop Mockup
Static open laptop with 3D forward tilt and a visible keyboard deck. Render live React UI via children or a static screenshot. Use screenInteractive for clickable demos; press the power key to sleep/wake the display. Pairs with animated-laptop for hover-to-open interaction.
Interactive app preview
Mini app with home, section, and project screens-open items and use Back; power key sleeps the display.
Sign in to view this example's source code.
Sign inWith Browser Mockup
Laptop mockup with browser mockup inside.
Sign in to view this example's source code.
Sign inProps
| Name | Type | Default | Description |
|---|---|---|---|
| children | ReactNode | undefined | Screen content; overrides image when provided |
| image | string | undefined | Screen image when children are not provided |
| imageAlt | string | "Screen content" | Accessible alt text for the screen image |
| imageFit | "contain" | "cover" | "contain" | How the screen image fills the display |
| imagePosition | "top" | "center" | "bottom" | "center" | Vertical alignment when using contain |
| showCamera | boolean | true | Show front camera on the top bezel |
| showTrackpad | boolean | true | Show trackpad on the keyboard deck |
| screenInteractive | boolean | false | Enable clicks and text selection inside the screen; blocks screen input when powered off |
| viewportClassName | string | undefined | Extra classes on the scrollable screen viewport (children mode) |
| screenScrollable | boolean | true when children | Enable vertical scroll inside the screen when using children |
| className | string | undefined | Classes for the outer frame container |