Macbook Mock

Faux MacBook frame with a hover-driven lid open and a fade-or-flap screen reveal. Hover to lift the lid; the idle screen crossfades or folds back to expose your image or React node.

UniqueUI CLI

npx uniqueui add macbook-mock

shadcn CLI

npx shadcn@latest add https://uniqueui-platform.vercel.app/r/macbook-mock.json -y

shadcn path expects @/lib/utils (run shadcn init first). Same source file is installed to components/ui/.

Preview

Usage

"use client";
import { MacbookMock } from "@/components/ui/macbook-mock";

export default function DeviceShowcase() {
  return (
    <div className="flex justify-center p-12">
      <MacbookMock
        size="md"
        tint="spaceGray"
        revealSrc="https://images.unsplash.com/photo-1517694712202-14dd9538aa97?auto=format&fit=crop&w=1200&q=80"
      />
    </div>
  );
}

Props

Prop	Type	Description
`size`	`"sm" \| "md" \| "lg"`	Outer width and lid height. Defaults to "md" (320px wide).
`tint`	`"silver" \| "spaceGray" \| "midnight"`	Chassis colourway. Affects lid, base, keyboard, trackpad, hinge, and ports.
`screenIdleClassName`	`string`	Tailwind classes for the solid screen fill shown when the lid is closed.
`revealSrc`	`string`	Image URL revealed on hover. Ignored when `screenContent` is set.
`revealAlt`	`string`	Alt text for the reveal image.
`screenContent`	`React.ReactNode`	Render any node inside the screen instead of an image — UI mock, video, gradient, etc.
`revealMode`	`"fade" \| "flap"`	How the idle layer gives way: a crossfade or a 3D fold of the top half.
`open`	`boolean`	Force the lid open without hover. Combine with `hoverDisabled` for a static mockup.
`hoverDisabled`	`boolean`	Ignore hover entirely; only the `open` prop controls the lid.
`className`	`string`	Classes merged onto the outer wrapper.