1

Phone Mockup

A device-frame illustration with side buttons, dynamic island, and a cropped/scrolled variant for showcasing app screens.

Props

Options you can pass to customize this component.

Prop
Type
Description
variant
"black" | "white" | "accent"

Chassis color. Defaults to "accent".

visibleRatio
number

Fraction of the phone height shown, cropping the frame from the bottom to simulate a scrolled screen. Defaults to 1 (full phone).

showDynamicIsland
boolean

Shows the dynamic island cutout. Defaults to true.

className
string

Extra classes merged onto the root element.

Installation

npx shadcn@latest addhttps://ui.nexvyn.dev/r/phone-mockup.json

How to use

import { PhoneMockupCard } from "@/components/illustration/phone-mockup"

export function Example() {
  return (
    <PhoneMockupCard variant="accent">
      <YourAppScreen />
    </PhoneMockupCard>
  )
}

Source Code

Click the code icon in the top-right corner to view the source code.

Contact

Questions or feedback? Reach out anytime.

License & Usage

  • •Free for personal and commercial use
  • •No attribution required
  • •Cannot be resold as a standalone product
  • •Anatomy/blueprint diagrams are licensed separately (CC BY-NC 4.0) and are not for commercial use
// No code loaded.
Screen
npx shadcn@latest addhttps://ui.nexvyn.dev/r/phone-mockup.json