MacBook Frame
newAn open laptop drawn in CSS around a 16:10 screen.
Overview
Revenue$53.4k+15%
Customers2,318+4%
Churn1.9%−0.3%
Monthly revenue
| Invoice | Customer | Amount | Status |
|---|---|---|---|
| INV-2041 | Acme Corp | $4,200 | Paid |
| INV-2040 | Globex | $1,850 | Pending |
| INV-2039 | Initech | $3,120 | Paid |
Installation
npx shadcn@latest add @blank/macbook-frameUsage
import { MacBookFrame } from "@/components/ui/macbook-frame"<MacBookFrame src="/dashboard.png" alt="Analytics dashboard" />The frame fills its container's width and the screen holds a 16:10 panel, the shape of a 1440 × 900 or 2880 × 1800 capture, so a screenshot drops in uncropped. Live UI inside the screen is clipped to it, like a real display: lay it out with container queries if it has to read at small sizes.
Examples
With a browser window
Frames compose: a Safari Frame sized in percent sits on the laptop's screen the way a window sits on a desktop.
useblank.design
Blank 3
Components that look finished on day one