IPhoneFrame Component

Overview

IPhoneFrame is a React component that renders a stylized iPhone frame with Dynamic Island. It displays an iPhone-like frame with customizable content area, perfect for showcasing mobile applications, designs, or screenshots in a polished iPhone context.

Features

• iPhone-style frame with Dynamic Island notch
• Clean, minimalist design focused on content
• Customizable content area via children prop
• Gradient frame styling for realistic appearance
• Fixed dimensions matching iPhone proportions
• Responsive design with Tailwind CSS
• Fully customizable via children prop

Installation

The component uses Tailwind CSS for styling. No additional dependencies are required.

Usage

Import the component:

import { IPhoneFrame } from "./components/ui/Frames";

Basic Example

<IPhoneFrame>
  <div className="p-4">
    <h1>Your App Content</h1>
    <p>Place your mobile app content here</p>
  </div>
</IPhoneFrame>

Example with Image Content

You can display images or any React content inside the frame:

<IPhoneFrame>
  <img 
    src="/screenshot.png" 
    alt="App screenshot"
    className="w-full h-full object-cover"
  />
</IPhoneFrame>

Props

The component accepts the following props:

• children (ReactNode, optional): Content to display inside the iPhone frame. Can be any React elements, images, or components.

Component Code

Here's the complete component implementation:

export function IPhoneFrame({ children }) {
  return (
    <div className="relative h-[518px] w-[248px] rounded-[44px] bg-linear-to-b from-gray-700 via-gray-500 to-gray-700 p-[2px] overflow-hidden">
      <div className="absolute top-4 flex w-full items-center justify-center gap-4 px-8">
        <div className="flex h-6 w-20 items-center justify-end rounded-full bg-black">
          <div className="mr-1 h-4 w-4 rounded-full bg-linear-to-b from-gray-800 via-slate-600 to-gray-800"></div>
        </div>
      </div>
      <div className="h-full w-full rounded-[42px] border-[6px] border-black bg-white overflow-hidden">
        {children}
      </div>
    </div>
  );
}

Styling

The component uses Tailwind CSS for styling. The frame features a gradient background (from-gray-700 via-gray-500 to-gray-700) to create a realistic iPhone appearance. The Dynamic Island is centered at the top and styled as a black rounded pill with a gradient circle inside. The content area has a white background with rounded corners and a black border. All styling can be customized by modifying the component's Tailwind classes.

Dimensions

The component has fixed dimensions: h-[518px] w-[248px], which matches iPhone proportions. The content area inside accounts for the frame padding and border.

Browser Support

The component works in all modern browsers that support React and CSS gradients. The gradient styling may vary slightly across browsers but maintains a consistent appearance.

License

This component is provided as-is for use in your projects. Feel free to modify and adapt it to your needs.