Device Mock

npx shadcn@latest add https://ui.saasflare.io/r/device-mock.json

pnpm add @saasflare/ui

"use client"import { SafariMock } from "@saasflare/ui"/** A Safari browser frame wrapping an app screenshot, with a URL in the address bar. */export function Demo() {    return (        <div className="w-full max-w-2xl">            <SafariMock url="https://app.saasflare.io/dashboard">                <img                    src="https://images.unsplash.com/photo-1551288049-bebda4e38f71?w=800"                    alt="Dashboard screenshot"                    className="aspect-video size-full object-cover"                />            </SafariMock>        </div>    )}

"use client"import { IPhoneMock } from "@saasflare/ui"/** An iPhone device frame wrapping a mobile screenshot, complete with notch and status bar. */export function Demo() {    return (        <IPhoneMock>            <img                src="https://images.unsplash.com/photo-1512941937669-90a1b58e7e9c?w=600"                alt="Mobile app screenshot"                className="aspect-[9/16] size-full object-cover"            />        </IPhoneMock>    )}