Iphone 15 Pro

import { IPhone15Pro } from '@hanzo/ui'

Default

A black iPhone 15 Pro frame with a plain screen.

export function Default() {
  return <IPhone15Pro />
}

Sizes

The default, pro-max and mini frames side by side.

export function Sizes() {
  return (
    <YStack flexDirection="row" flexWrap="wrap" gap="$6" items="flex-start">
      <IPhone15Pro variant="mini" />
      <IPhone15Pro variant="default" />
      <IPhone15Pro variant="pro-max" />
    </YStack>
  )
}

Colors

The four documented finishes.

export function Colors() {
  return (
    <YStack flexDirection="row" flexWrap="wrap" gap="$6" items="flex-start">
      <IPhone15Pro color="black" />
      <IPhone15Pro color="white" />
      <IPhone15Pro color="blue" />
      <IPhone15Pro color="natural" />
    </YStack>
  )
}

With content

Arbitrary UI filling the screen, clipped to its corners.

9:41

export function WithContent() {
  return (
    <IPhone15Pro variant="mini">
      <YStack flex={1} items="center" justify="center" bg="$background">
        <SizableText size="$6" fontWeight="600">
          9:41
        </SizableText>
      </YStack>
    </IPhone15Pro>
  )
}

Types

export type IPhone15ProVariant = 'default' | 'pro-max' | 'mini'

export type IPhone15ProColor = 'black' | 'white' | 'blue' | 'natural'

export type IPhone15ProProps = Omit<ComponentProps<typeof Frame>, 'variant' | 'children'> & {
  children?: ReactNode
  variant?: IPhone15ProVariant | null
  color?: IPhone15ProColor | null
  className?: string
}

Exports

IPhone15Protype IPhone15ProColortype IPhone15ProPropstype IPhone15ProVariant