Package Exports

phone-mockup-react
phone-mockup-react/dist/index.esm.js
phone-mockup-react/dist/index.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (phone-mockup-react) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

Phone Mockup React

A beautiful and customizable phone mockup component for React applications. This package provides a collection of modern phone mockups with realistic designs and animations.

Features

🎨 Multiple phone models support
📱 Realistic device frames and notches
🎯 Dynamic Island support for iPhone 16
💫 Smooth animations and transitions
🎮 Interactive elements
📦 Zero dependencies
🎯 TypeScript support
🎨 Customizable styles

Installation

npm install phone-mockup-react
# or
yarn add phone-mockup-react

Usage

First, import the component and its styles:

import { PhoneMockup } from 'phone-mockup-react';
import 'phone-mockup-react/dist/styles.css';

Then use it in your React component:

function App() {
  return (
    <PhoneMockup model="iphone-16">
      <div>Your content here</div>
    </PhoneMockup>
  );
}

Supported Phone Models

iPhone Models

iPhone 16
- Dynamic Island
- Dimensions: 393x852px
- Notch design
- Modern rounded corners
iPhone 15
- Dimensions: 393x852px
- Notch design
- Modern rounded corners
iPhone 14
- Dimensions: 390x844px
- Notch design
- Modern rounded corners

Samsung Models

Samsung S24
- Dimensions: 360x780px
- Punch hole camera
- Rounded corners (35px)
Samsung A54
- Dimensions: 360x780px
- Punch hole camera
- Rounded corners (35px)
Samsung S23
- Dimensions: 360x780px
- Punch hole camera
- Rounded corners (35px)

Google Pixel Models

Pixel 8
- Dimensions: 370x790px
- Punch hole camera
- Rounded corners (32px)
Pixel 7
- Dimensions: 370x790px
- Punch hole camera
- Rounded corners (32px)

Xiaomi Models

Xiaomi 14
- Dimensions: 365x785px
- Punch hole camera
- Rounded corners (38px)
Xiaomi 13
- Dimensions: 365x785px
- Punch hole camera
- Rounded corners (38px)

Props

Prop	Type	Default	Description
model	PhoneModel	'iphone-16'	The phone model to display
children	ReactNode	-	Content to display inside the phone screen
className	string	''	Additional CSS class name

PhoneModel Type

type PhoneModel = 
  | 'iphone-16'
  | 'iphone-15'
  | 'iphone-14'
  | 'samsung-s24'
  | 'samsung-a54'
  | 'samsung-s23'
  | 'pixel-8'
  | 'pixel-7'
  | 'xiaomi-14'
  | 'xiaomi-13';

Features by Model

Common Features

Realistic device frames
Power button
Volume buttons
Smooth animations
Responsive design

iPhone-Specific Features

Notch design
Dynamic Island (iPhone 16 only)
iOS-style rounded corners

Android-Specific Features

Punch hole camera
Android-style rounded corners
Different aspect ratios

Examples

Basic Usage

<PhoneMockup model="iphone-16">
  <div>Hello World!</div>
</PhoneMockup>

Different Models

<PhoneMockup model="samsung-s24">
  <div>Samsung Content</div>
</PhoneMockup>

<PhoneMockup model="pixel-8">
  <div>Pixel Content</div>
</PhoneMockup>

With Custom Styling

<PhoneMockup model="xiaomi-14" className="custom-phone">
  <div>Custom Styled Content</div>
</PhoneMockup>

Contributing

Contributions are welcome! Please feel free to submit a Pull Request.