Android

PreviewCode

@/demos/AndroidDemo.tsx

import { Android } from '@/registry/magicui/android'

export function AndroidDemo() {
  return (
    <div class="relative">
      <Android class="size-full" />
    </div>
  )
}

Examples

With Image

PreviewCode

@/demos/AndroidDemo2.tsx

import { Android } from '@/registry/magicui/android'

export function AndroidDemo2() {
  return (
    <div class="relative">
      <Android
        class="size-full"
        src="https://images.unsplash.com/photo-1730326405863-c6fa7e499a6e?q=80&w=1964&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
      />
    </div>
  )
}

With Video

PreviewCode

@/demos/AndroidDemo3.tsx

import { Android } from '@/registry/magicui/android'

export function AndroidDemo3() {
  return (
    <div class="relative">
      <Android
        class="size-full"
        videoSrc="https://videos.pexels.com/video-files/14993748/14993748-uhd_1296_2304_30fps.mp4"
      />
    </div>
  )
}

Installation

pnpm

pnpm dlx shadcn@latest add @magicui-solid/android

bun

bunx shadcn@latest add @magicui-solid/android

yarn

yarn dlx shadcn@latest add @magicui-solid/android

npm

npx shadcn@latest add @magicui-solid/android

Import

import { Android } from '@/components/magicui/android'

Usage

<Android />

Props

Prop	Type	Default	Description
width	number	433	The width of the Android window
height	number	882	The height of the Android window
src	string	-	The source of the image to display
videoSrc	string	-	The source of the video to display

The Android component also accepts all properties of the SVGElement type.

Original:

magicui.design/docs/components/android