║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║

---

title: Android date: 2024-12-20 description: A mockup of an Android device. author: dillionverma published: true

<ComponentPreview name="android-demo" />

Installation

<Tabs defaultValue="cli"> <TabsList> <TabsTrigger value="cli">CLI</TabsTrigger> <TabsTrigger value="manual">Manual</TabsTrigger> </TabsList> <TabsContent value="cli">

npx shadcn@latest add @magicui/android

</TabsContent> <TabsContent value="manual"> <Steps>

<Step>Copy and paste the following code into your project.</Step>

<ComponentSource name="android" /> </Steps> </TabsContent> </Tabs>

Examples

With Image

<ComponentPreview name="android-demo-2" />

With Video

<ComponentPreview name="android-demo-3" />

Usage

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

<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.

║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║