# iPhone 17 Pro Max (w/ image)

> Example iPhone 17 Pro Max mockup with a bundled screen wallpaper; shows the children slot and /images/blocks/... swap pattern.

A shadcn/ui block from the [@uiception](https://uiception.com/?utm_source=shadcn.exchange) registry, listed on [shadcn.exchange](https://shadcn.exchange/r/uiception/iphone-17-pro-max-with-image).

- Page, with a live preview: https://shadcn.exchange/r/uiception/iphone-17-pro-max-with-image
- Screenshot: https://shadcn.exchange/shot/uiception/iphone-17-pro-max-with-image/light.png
- Registry item: https://uiception.com/r/iphone-17-pro-max-with-image.json
- Listed: 2026-10-13, source last changed 2026-10-13

## Install

```bash
npx shadcn@latest add https://shadcn.exchange/r/uiception/iphone-17-pro-max-with-image.json
```

Run it in a project that has shadcn/ui set up. It adds the files below and installs what they depend on.

## Dependencies

- Registry items: `https://uiception.com/r/block-media.json`, `https://uiception.com/r/iphone-17-pro-max.json`

## Files

### `registry/new-york/blocks/iphone-17-pro-max-with-image/page.tsx`

```tsx
import Iphone17ProMaxWithImage from "./components/iphone-17-pro-max-with-image"

export default function Page() {
  return (
    <div className="px-4 py-4 md:px-6 md:py-6">
      <Iphone17ProMaxWithImage />
    </div>
  )
}
```

### `registry/new-york/blocks/iphone-17-pro-max-with-image/components/iphone-17-pro-max-with-image.tsx`

```tsx
import Image from "next/image"
import { createBlockImage } from "@/lib/block-media"

import Iphone17ProMax from "../../iphone-17-pro-max/components/iphone-17-pro-max"

const blockImage = createBlockImage("iphone-17-pro-max-with-image")
const SCREEN_WALLPAPER = blockImage("image.png")

export default function Iphone17ProMaxWithImage() {
  return (
    <Iphone17ProMax statusBar={{ tint: "light" }}>
      <div className="relative size-full overflow-hidden">
        <Image
          src={SCREEN_WALLPAPER}
          alt="iPhone screen wallpaper"
          unoptimized
          fill
          className="object-cover object-center"
          sizes="(max-width: 768px) 100vw, 384px"
          loading="eager"
        />
      </div>
    </Iphone17ProMax>
  )
}
```

### `public/images/blocks/iphone-17-pro-max-with-image/image.png.gitkeep`

```gitkeep
Place your asset here. Same base name, any supported format: jpg, jpeg, png, webp, avif, gif, or svg. Remove the .gitkeep extension from the filename.
```