Build a laptop mockup in React

A laptop drawn in CSS, not a photo

Glass Laptop is a free, MIT-licensed React component modeled on the proportions of a 16-inch MacBook Pro laptop. CSS 3D draws its notched screen, keyboard and trackpad, with no images or WebGL. Your screenshot or live React content fills the screen.

Shut, the view looks down on the closed case. Open, the lid faces you. Changing its open prop swings the lid and moves the view between the two, and the screen lights once both have come to rest.

Install it

Add the @glassyui registry to components.json as the installation guide shows, then add the component. It brings its own stylesheet and needs only clsx.

pnpm dlx shadcn@4.14.1 add @glassyui/glass-laptop

Put a screenshot on the screen

The screen has a 3456 by 2234 aspect ratio, matching the resolution listed in Apple’s 16-inch display specifications. An image with that ratio fills it exactly. Any 16:10 image works too: object-cover trims a sliver from its sides.

import { GlassLaptop } from "@/components/glassyui/glass-laptop";

export function AppShowcase() {
  return (
    <GlassLaptop aria-label="The app’s dashboard on a laptop" className="w-full max-w-5xl">
      <img alt="" className="size-full object-cover" src="/dashboard.png" />
    </GlassLaptop>
  );
}

Or put a live React screen on it

Children are laid out at resolution CSS pixels wide, 1728 by default, and scaled to fit. Pass a smaller width, such as 1496, to show larger text.

The children render only while the screen is lit. Menus and dialogs they open in a portal appear on the page at full size, so mark a screen that is only for show inert.

<GlassLaptop aria-label="The editor on a laptop" resolution={1496}>
  <div className="size-full" inert>
    <Editor />
  </div>
</GlassLaptop>

Open the lid as the page loads

Start shut and open it on the next frame, so the closed case paints first and the lid swings up while the view moves in. Reduced motion skips the movement.

const [open, setOpen] = useState(false);

useEffect(() => {
  const frame = requestAnimationFrame(() => setOpen(true));

  return () => cancelAnimationFrame(frame);
}, []);

return (
  <GlassLaptop open={open} finish="silver">
    <YourScreen />
  </GlassLaptop>
);

Choose a finish and a look

finish is black or silver. A faint reflection crosses the glass by default; pass glare={false} for flat marketing captures. Give the laptop an aria-label that says what its screen shows.

Do I get a MacBook mockup image or a React component?

Glass Laptop is a React component for websites, not a Photoshop file or an image exporter. You can put an existing screenshot on its screen or render a live React view. The installation copies the source into your project, so you can change the frame and animation yourself.

Trademarks

MacBook and MacBook Pro are trademarks of Apple Inc., registered in the U.S. and other countries and regions. Glass Laptop and this guide are independent and have not been authorized, sponsored or otherwise approved by Apple Inc. Product names identify the device referenced by the mockup; they are not the component’s name. See Apple’s trademark guidelines.