iMac Device Mockup

Heroes

About

A responsive Apple iMac device frame that renders any content (an app screen, image, video, or iframe) inside the screen area, for showcasing product demos and website previews.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds iMac Device Mockup to your project and fits it to your theme.

Code

How iMac Device Mockup is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

import IMac from "@/components/ui/imac";

export default function IMacDemo() {
  return (
    <div className="flex min-h-[32rem] w-full items-center justify-center bg-background p-8">
      <IMac size="lg" color="blue">
        <img
          src="https://cdn.21st.dev/assets/localized/8e3dbc28350f201450dc7eab5b544524dd01f513d6c2454b5e260645af4b25c2.jpg"
          alt="App screen"
          className="h-full w-full object-cover"
        />
      </IMac>
    </div>
  );
}