Logo/Mockup

Hello World

Get the MacBook mockup on screen in a few steps.

1. Set up a React project

Create a React app (for example with Next.js and Tailwind):

npx create-next-app@latest

See Next.js if you want the official walkthrough.

2. Install svg-mockup-kit

From your project root:

npm install svg-mockup-kit

The package lists React and React DOM as peer dependencies (17+). They are already present in most Next.js and Vite templates.

3. Import and render

Use the named export MacbookMockup. Pass anything you want inside the screen as children:

import { MacbookMockup } from "svg-mockup-kit";

export default function Page() {
  return (
    <div className="w-full max-w-4xl mx-auto p-8">
      <MacbookMockup className="h-auto w-full">
        <div className="flex h-full w-full items-center justify-center bg-sky-200">
          <p className="text-5xl">Hello, world!</p>
        </div>
      </MacbookMockup>
    </div>
  );
}

The root node is an <svg> with a fixed viewBox (1216×735). Use className (for example w-full, max-w-3xl) so it scales to your layout.

4. Optional: live site in the screen

You can put an <iframe> (or an image, video, etc.) inside the mockup the same way:

<MacbookMockup className="w-full">
  <iframe
    src="https://example.com"
    title="Demo"
    style={{ width: "100%", height: "100%", border: "none" }}
  />
</MacbookMockup>

That is all you need for a first mockup. For sizing and styling options, continue to Customization; for foreignObject caveats, see Usage.

NEXT

Components/Customization