Component

Device Frame

iPhone, iPad, and other device mockup frames for showcasing app screenshots. Uses the headless @refraction-ui/device-frame core.

Examples

iPhone and iPad device frames with content inside.

iPhone

App Preview

iPad

Tablet Preview

Installation

$pnpm add @refraction-ui/react-device-frame

Usage

tsx

import { DeviceFrame } from '@refraction-ui/react-device-frame'
export function MyComponent() {
  return (
    <DeviceFrame device="iphone">
      <img src="/screenshot.png" alt="App screenshot" />
    </DeviceFrame>
  )
}

Props

Prop	Type	Default	Description
`device`	`'iphone' \| 'ipad' \| 'macbook' \| 'browser'`	--	Device type for the frame.
`orientation`	`'portrait' \| 'landscape'`	`'portrait'`	Device orientation.
`children`	`ReactNode`	--	Content to display inside the frame.
`className`	`string`	--	Additional CSS classes.