Mockups

Safari Frame

new

macOS Safari window chrome around a screenshot, a video or live UI.

app.northwind.io

NorthwindMC

Tuesday, October 13

Good morning, Mia

MRR$48.2k+12.4%

Customers2,318+4.1%

Net retention118%+2.0%

Monthly revenueLast 8 months

Installation

npx shadcn@latest add @blank/safari-frame

Usage

import { SafariFrame } from "@/components/ui/safari-frame"

<SafariFrame url="https://useblank.design" src="/screenshot.png" alt="Blank docs" />

The address field shows the host only, the way Safari does, with a lock unless the URL is http://. There is no light or dark prop: the chrome is drawn from theme tokens, so it follows the page.

Examples

Tabs

useblank.design

Blank — Mockups

Pricing

GitHub

NewDevice mockups

Show the product, not a placeholder

Phones, laptops and windows drawn in CSS, so your live UI sits in them at any size and in either theme.