Components
ModernAndroid
The ModernAndroid component is a visually appealing, customizable Android smartphone mockup built with React and Tailwind. It provides a sleek device frame with rounded corners, top camera cutout, and optional light/dark themes. You can display either images or videos inside the screen, making it perfect for app previews, UI demos, or interactive product showcases. The component supports dynamic sizing, allowing you to adjust width and height, and it ensures that the content inside the screen is properly clipped to maintain the device's realistic appearance. It’s ideal for presenting mobile interfaces in a clean, modern, and professional way.
Loading preview...
// Demo file for ModernAndroid component
import ModernAndroid from "@/components/ui/modern-android";
export default function DemoOne() {
return (
// <div className="flex justify-center items-center min-h-screen bg-gray-100 dark:bg-gray-900 p-4">
// {/* Android screen with an image */}
// <ModernAndroid
// width={400}
// height={800}
// src="/images/sample-app-screenshot.png"
// />
// {/* Android screen with a video */}
// <ModernAndroid
// width={360}
// height={760}
// videoSrc="/videos/sample-video.mp4"
// className="ml-8"
// />
// </div>
<ModernAndroid />
);
}