Skip to main content
Display your mobile app screenshots and videos in a realistic Android device frame.

​
Installation

npx shadcn@latest add @magicui/android

​
Usage

import { Android } from "@/components/ui/android"

export default function Example() {
  return <Android src="/app-screenshot.png" />
}

​
Props

​
width
number
default:"433"
Width of the Android device frame
​
height
number
default:"882"
Height of the Android device frame
​
src
string
Source URL of the image to display in the device screen
​
videoSrc
string
Source URL of the video to display (takes precedence over src)
The component also accepts all standard SVG element props.

​
Examples

​
With Image

<Android src="/screenshot.png" />

​
With Video

<Android videoSrc="/app-demo.mp4" />

​
Custom Size

<Android width={300} height={612} src="/screenshot.png" />

​
Features

  • Realistic Android device frame
  • Support for images and videos
  • Customizable dimensions
  • Auto-playing, looping videos
  • Maintains proper aspect ratio
  • SVG-based for crisp rendering

​
Notes

  • Videos auto-play, loop, and are muted by default
  • Component uses SVG for the device frame
  • Screen content is clipped to device shape
  • Supports dark mode

​
Credits

Created by dillionverma

Build docs developers (and LLMs) love

Get started for freeTalk to us