IOS Mockups

Top PaddingBottom Padding

Iphone Mockup

Lorem ipsum dolor sit amet consectetur adipisicing elit. Facilis ut nesciunt, cum porro suscipit deleniti perferendis magni. Excepturi cupiditate tempore quibusdam corrupti nemo necessitatibus, vel, eligendi odio cum fugit fuga?

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Libero nam consequuntur praesentium expedita impedit possimus dolorum odio debitis veniam saepe, officia, fugit distinctio sit qui? Ea labore illo perferendis quia? Labore tempore voluptatibus doloribus eos mollitia sed qui natus repellendus, inventore animi architecto itaque assumenda in! Veniam architecto, sint modi natus saepe quis, quidem neque maiores aspernatur quam est? Illo? Corrupti, voluptatum nobis saepe eligendi architecto laboriosam temporibus, porro, ipsa velit error natus alias necessitatibus magni illo in! Aliquid impedit blanditiis rem nam amet provident quis tenetur ratione vitae cum. Delectus sed nam vel, culpa ducimus sunt dolorum ratione, natus eligendi facere odit repellendus, nostrum adipisci tempore! Nemo neque reprehenderit veniam, molestias, eum ullam vel placeat repellat excepturi labore vero. Voluptates officia nemo odit similique nihil praesentium delectus, illum distinctio culpa unde, optio repellendus sequi amet quo atque quia vel quas? Assumenda eaque dolore, ipsum doloribus optio quae id sunt? Tempora mollitia quae ab cum. Inventore voluptatem a, doloribus quidem sunt porro enim sed at quos doloremque ea quis eligendi magni modi impedit. Consequuntur soluta distinctio vero nam dicta eveniet. Libero quis aliquid ullam, reprehenderit iste perspiciatis possimus eaque ad ipsum porro cupiditate. Ipsam sapiente soluta temporibus! At reiciendis aperiam explicabo iusto alias ipsam repellendus dolores, culpa veniam non corrupti! Iusto ratione eveniet iure tempore quis magni illum dolores animi sed est obcaecati adipisci, mollitia ipsa, explicabo quod nemo officia! Aspernatur recusandae pariatur voluptatibus alias rerum dolore nemo dolores voluptas. Nam sequi minus aut quos! Minus, et? Quidem id omnis quo exercitationem similique excepturi, atque qui? Placeat inventore impedit quaerat delectus, facere, eligendi debitis dicta et voluptatibus beatae officiis velit? Ex quibusdam tempore vitae, rem eveniet eos? Consequatur, nobis saepe ipsa repellat ducimus error vitae quia, at inventore culpa et, ipsam itaque aliquam nihil accusamus. Consequatur eius neque ipsa fugit. Adipisci eius dignissimos sint, incidunt veniam, aspernatur rerum saepe magni perspiciatis dolores nisi aut magnam qui ipsa iure laboriosam nobis culpa, voluptatem reprehenderit consectetur sequi tenetur vel aperiam. Veniam, cum. Perspiciatis eligendi est illum quia, incidunt, officiis reprehenderit, architecto molestiae voluptatibus ratione maxime iusto quae laboriosam minima amet similique? Sed hic facilis a unde quos pariatur architecto expedita nostrum debitis? Vel, ratione cupiditate doloribus harum ipsa dolores in nisi natus nulla non quia officiis alias. Deserunt, nostrum officiis! Molestiae officiis odit, nulla culpa assumenda maiores? Autem iure eius omnis reprehenderit! Perspiciatis tempore ab voluptatem, vel eos fugit ullam pariatur blanditiis ipsa maiores nisi repellat est tempora, reprehenderit nihil facere soluta sed sit sequi recusandae iusto et fuga quod. Consectetur, repellat. Obcaecati possimus laboriosam facilis praesentium ipsa asperiores quaerat pariatur modi illum eligendi, eveniet et odit laudantium facere similique sequi quia sunt aut nihil, minima itaque dolore nesciunt numquam quis! Esse? Atque, quam non et sequi labore neque, illum sint, perferendis aut distinctio eum quidem voluptates quis asperiores temporibus natus. Aut consequuntur a incidunt iste. Dolore, non. Cum ex possimus corporis? Culpa veniam quidem autem consequatur nobis sunt iusto libero fugiat totam nesciunt illum molestiae perferendis nihil vitae ipsa rerum laboriosam, harum porro quis, rem excepturi alias! Neque consequuntur itaque similique. Ad quibusdam libero dignissimos provident voluptate ipsam iusto. Autem, labore? Id reprehenderit sed tempore velit quidem necessitatibus nisi eveniet, corporis inventore animi harum blanditiis nam sit recusandae ducimus excepturi! Aspernatur. Incidunt, ipsam, cum perspiciatis optio aspernatur natus cupiditate nostrum unde illum quos ullam laboriosam excepturi, nesciunt aut laborum! Culpa ratione mollitia amet eos iusto itaque voluptates molestias saepe, deleniti tempore. Rerum error exercitationem blanditiis a consequuntur quae corrupti, quaerat, nam possimus sed autem tempore doloribus dolores quasi maiores odit sint expedita atque velit, sapiente dolor debitis fugiat hic. Earum, harum.

Installation

npm install @zuude-ui/ios-mockups

Usage

import { Iphone } from "@zuude-ui/ios-mockups";
 
export default function MyComponent() {
  return (
    <Iphone size="md" color="natural-titanium">
      {/* Your content here */}
    </Iphone>
  );
}

Props

Prop	Type	Default	Description
`size`	`"sm" \| "md" \| "lg"`	`"md"`	Controls the size of the iPhone mockup
`color`	`"natural-titanium" \| "blue-titanium" \| "white-titanium" \| "black-titanium" \| "blue" \| "pink" \| "yellow" \| "green" \| "black"`	`"natural-titanium"`	Sets the color scheme of the iPhone mockup
`className`	`string`	`""`	Additional CSS classes to apply to the mockup container
`buttonHandlers`	`IphoneButtonsAction`	-	Callback functions for the iPhone buttons

CSS Variables

The component uses several CSS variables that you can customize:

Variable	Default	Description	Example
`--screen-color`	`transparent`	Sets the background color of the content area	`[--screen-color:white]` or `[--screen-color:var(--background)]`
`--dynamic-island-color`	`black`	Sets the color of the dynamic island and home indicator	`[--dynamic-island-color:white]`
`--top-safe-area`	varies by size	Height of the top safe area (automatically set based on size)	`46px` for small size, `60px` for medium size, `70px` for large size
`--bottom-safe-area`	varies by size	Height of the bottom safe area (automatically set based on size)	`15px` for all sizes

Examples

Different Sizes

<Iphone size="sm">Small iPhone</Iphone>
<Iphone size="md">Medium iPhone</Iphone>
<Iphone size="lg">Large iPhone</Iphone>

Different Colors

<Iphone color="blue-titanium">Blue Titanium</Iphone>
<Iphone color="pink">Pink</Iphone>
<Iphone color="green">Green</Iphone>

With Button Handlers

<Iphone
  buttonHandlers={{
    action: () => console.log("Action button pressed"),
    volumeUp: () => console.log("Volume up"),
    volumeDown: () => console.log("Volume down"),
    power: () => console.log("Power button pressed"),
  }}
>
  Interactive iPhone
</Iphone>

Customizing CSS Variables

// White background with white dynamic island
<Iphone style={{ "--screen-color": "white", "--dynamic-island-color": "black" }}>
  Content
</Iphone>
 
// Using Tailwind CSS variables
<Iphone className="![--screen-color:white] ![--dynamic-island-color:black]">
  Content
</Iphone>