Getting Started
Components
Device Mocks
Special Effects
Animations
Text Animations
Buttons
import { Android } from "@/registry/magicui/android";
export function AndroidDemo() {
return (
<div className="relative">
<Android className="size-full" />
</div>
);
}
Installation
pnpm dlx shadcn@latest add @magicui/android
Examples
With Image
import { Android } from "@/registry/magicui/android";
export function AndroidDemo() {
return (
<div className="relative">
<Android
className="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
import { Android } from "@/registry/magicui/android";
export function AndroidDemo() {
return (
<div className="relative">
<Android
className="size-full"
videoSrc="https://videos.pexels.com/video-files/14993748/14993748-uhd_1296_2304_30fps.mp4"
/>
</div>
);
}
Usage
import { Android } from "@/components/magicui/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.
Limited Time Offer
Ship Faster with Magic UI ProMagic UI Pro
Stop building from scratch.
Get 8 production-ready templates and 50+ premium components that your users will love.
✓
Next.js 15 + TypeScript ready✓
Copy, paste, customize in minutes✓
Save 100+ hours of development