Device Frame

Blocks & Slices

Pure-CSS device mockups that clip children into a browser window (traffic lights, address bar, optional tab strip) or a phone (dynamic-island notch, side buttons, screen inner shadow). Hairline edges stay crisp in light and dark, and the phone scales proportionally at any width via container-query units. Fully static — no animation, so nothing to disable under reduced motion.

Inspired by Ali Imam — Device (aliimam.in/docs, historical) — independently built, not affiliated. Attribution policy

Ship it in a framephone & browser mockups

Installation

npx shadcn@latest add https://parable-three.vercel.app/r/device-frame.json

Runs the shadcn CLI — the component source is copied intocomponents/parable/device-frame.tsx. You own it from there.

Usage

The exact code rendering the preview above.

<div className="mx-auto w-full max-w-md">
    <DeviceFrame variant="browser" url="parable-three.vercel.app" tab="Parable">
      <div
        className="flex h-full w-full flex-col items-center justify-center gap-2"
        style={{ background: "radial-gradient(130% 120% at 18% 0%, #8b5cf6 0%, #ec4899 42%, #0f0f10 100%)" }}
      >
        <span className="text-2xl font-semibold tracking-tight text-white">Ship it in a frame</span>
        <span className="text-xs font-medium text-white/70">phone &amp; browser mockups</span>
      </div>
    </DeviceFrame>
  </div>

Props

DeviceFrameProps extends React.HTMLAttributes<HTMLDivElement>

Prop	Type	Default	Description
variant	"phone" \| "browser"	"browser"	Which mockup to render around the children.
url	string	"parable-three.vercel.app"	Address-bar text for the `"browser"` variant.
tab	string	—	Optional tab label for the `"browser"` variant. When provided, a tab strip is rendered above the toolbar; omit it for a chromeless single-row window.
shadow	boolean	true	Layered, realistic drop shadow under the frame.
children	React.ReactNode	—	Screen content — clipped to the device's screen area.