STARCK UI

MacBook Mockup

A responsive CSS device frame with an accessible optional fullscreen preview.

Used inSessionWatcher ↗

Live workspace

One glance. Then back to work.

4 active72% remainingResets in 1h

Install

Add the source directly to your shadcn project.

pnpm dlx shadcn@latest add https://ui.starck.studio/r/macbook-mockup.json

Usage

<MacbookMockup frameSrc="https://ui.starck.studio/preview/macbook-frame.webp">
  <div className="relative flex size-full flex-col overflow-hidden bg-gradient-to-br from-blue-50 via-white to-violet-100 p-[7%]">
    <div className="flex items-center gap-2">
      <span className="size-2 rounded-full bg-red-400" />
      <span className="size-2 rounded-full bg-amber-400" />
      <span className="size-2 rounded-full bg-emerald-400" />
    </div>
    <div className="m-auto max-w-md text-center">
      <p className="text-[clamp(8px,1.4vw,14px)] text-zinc-500">Live workspace</p>
      <h2 className="mt-2 text-[clamp(14px,3vw,34px)] leading-tight font-semibold tracking-[-0.04em] text-zinc-950">
        One glance. Then back to work.
      </h2>
      <div className="mt-5 flex justify-center gap-2">
        <span className="rounded-full bg-white/80 px-2.5 py-1 text-[clamp(6px,1vw,11px)] text-zinc-600 shadow-sm">4 active</span>
        <span className="rounded-full bg-white/80 px-2.5 py-1 text-[clamp(6px,1vw,11px)] text-zinc-600 shadow-sm">72% remaining</span>
        <span className="rounded-full bg-white/80 px-2.5 py-1 text-[clamp(6px,1vw,11px)] text-zinc-600 shadow-sm">Resets in 1h</span>
      </div>
    </div>
  </div>
</MacbookMockup>