Android

Realistic Android device mockup component for showcasing mobile apps. Perfect for React and Next.js projects with TypeScript support, Tailwind styling, and seamless shadcn/ui integration.

Loading component...

"use client";import { SVGProps } from "react";export interface AndroidProps extends SVGProps<SVGSVGElement> {  width?: number;  height?: number;  src?: string;  videoSrc?: string;}export const Android = ({  width = 433,  height = 882,  src,  videoSrc,  ...props}: AndroidProps) => {  return (    <svg      width={width}      height={height}      viewBox={`0 0 ${width} ${height}`}      fill="none"      xmlns="http://www.w3.org/2000/svg"      {...props}    >      <path        d="M376 153H378C379.105 153 380 153.895 380 155V249C380 250.105 379.105 251 378 251H376V153Z"        className="fill-[#E5E5E5] dark:fill-[#404040]"      />      <path        d="M376 301H378C379.105 301 380 301.895 380 303V351C380 352.105 379.105 353 378 353H376V301Z"        className="fill-[#E5E5E5] dark:fill-[#404040]"      />      <path        d="M0 42C0 18.8041 18.804 0 42 0H336C359.196 0 378 18.804 378 42V788C378 811.196 359.196 830 336 830H42C18.804 830 0 811.196 0 788V42Z"        className="fill-[#E5E5E5] dark:fill-[#404040]"      />      <path        d="M2 43C2 22.0132 19.0132 5 40 5H338C358.987 5 376 22.0132 376 43V787C376 807.987 358.987 825 338 825H40C19.0132 825 2 807.987 2 787V43Z"        className="fill-white dark:fill-[#262626]"      />      <g clipPath="url(#android-clip)">        <path          d="M9.25 48C9.25 29.3604 24.3604 14.25 43 14.25H335C353.64 14.25 368.75 29.3604 368.75 48V780C368.75 798.64 353.64 813.75 335 813.75H43C24.3604 813.75 9.25 798.64 9.25 780V48Z"          className="fill-[#E5E5E5] stroke-[#E5E5E5] stroke-[0.5] dark:fill-[#404040] dark:stroke-[#404040]"        />      </g>      <circle        cx="189"        cy="28"        r="9"        className="fill-white dark:fill-[#262626]"      />      <circle        cx="189"        cy="28"        r="4"        className="fill-[#E5E5E5] dark:fill-[#404040]"      />      {src && (        <image          href={src}          width="360"          height="800"          className="size-full object-cover"          preserveAspectRatio="xMidYMid slice"          clipPath="url(#android-clip)"        />      )}      {videoSrc && (        <foreignObject          x="9"          y="14"          width="360"          height="800"          clipPath="url(#android-clip)"        >          <video            className="size-full object-cover"            src={videoSrc}            autoPlay            loop            muted            playsInline          />        </foreignObject>      )}      <defs>        <clipPath id="android-clip">          <rect            width="360"            height="800"            rx="33"            ry="25"            className="fill-white dark:fill-[#262626]"            transform="translate(9 14)"          />        </clipPath>      </defs>    </svg>  );};

Installation

npx shadcn@latest add https://www.shadcn.io/registry/android.json

npx shadcn@latest add https://www.shadcn.io/registry/android.json

pnpm dlx shadcn@latest add https://www.shadcn.io/registry/android.json

bunx shadcn@latest add https://www.shadcn.io/registry/android.json

Features

Free open source React component built for Next.js applications with zero licensing costs
Realistic Android device mockup with authentic proportions and modern design using SVG
TypeScript-first development with comprehensive type definitions and IntelliSense support
Tailwind CSS integration for seamless styling and dark mode theme adaptation
shadcn/ui compatibility following established design system patterns
Image and video display support with proper aspect ratio handling using modern JavaScript
Customizable dimensions while maintaining authentic device proportions
Hardware detail rendering including volume buttons, power button, and front camera elements
Automatic content clipping for content that fits perfectly within the screen area
Responsive design that scales appropriately across different screen sizes
Performance optimized with efficient SVG rendering and GPU acceleration

Examples

With Image Content

Loading component...

"use client";import { SVGProps } from "react";export interface AndroidProps extends SVGProps<SVGSVGElement> {  width?: number;  height?: number;  src?: string;  videoSrc?: string;}export const Android = ({  width = 433,  height = 882,  src,  videoSrc,  ...props}: AndroidProps) => {  return (    <svg      width={width}      height={height}      viewBox={`0 0 ${width} ${height}`}      fill="none"      xmlns="http://www.w3.org/2000/svg"      {...props}    >      <path        d="M376 153H378C379.105 153 380 153.895 380 155V249C380 250.105 379.105 251 378 251H376V153Z"        className="fill-[#E5E5E5] dark:fill-[#404040]"      />      <path        d="M376 301H378C379.105 301 380 301.895 380 303V351C380 352.105 379.105 353 378 353H376V301Z"        className="fill-[#E5E5E5] dark:fill-[#404040]"      />      <path        d="M0 42C0 18.8041 18.804 0 42 0H336C359.196 0 378 18.804 378 42V788C378 811.196 359.196 830 336 830H42C18.804 830 0 811.196 0 788V42Z"        className="fill-[#E5E5E5] dark:fill-[#404040]"      />      <path        d="M2 43C2 22.0132 19.0132 5 40 5H338C358.987 5 376 22.0132 376 43V787C376 807.987 358.987 825 338 825H40C19.0132 825 2 807.987 2 787V43Z"        className="fill-white dark:fill-[#262626]"      />      <g clipPath="url(#android-clip)">        <path          d="M9.25 48C9.25 29.3604 24.3604 14.25 43 14.25H335C353.64 14.25 368.75 29.3604 368.75 48V780C368.75 798.64 353.64 813.75 335 813.75H43C24.3604 813.75 9.25 798.64 9.25 780V48Z"          className="fill-[#E5E5E5] stroke-[#E5E5E5] stroke-[0.5] dark:fill-[#404040] dark:stroke-[#404040]"        />      </g>      <circle        cx="189"        cy="28"        r="9"        className="fill-white dark:fill-[#262626]"      />      <circle        cx="189"        cy="28"        r="4"        className="fill-[#E5E5E5] dark:fill-[#404040]"      />      {src && (        <image          href={src}          width="360"          height="800"          className="size-full object-cover"          preserveAspectRatio="xMidYMid slice"          clipPath="url(#android-clip)"        />      )}      {videoSrc && (        <foreignObject          x="9"          y="14"          width="360"          height="800"          clipPath="url(#android-clip)"        >          <video            className="size-full object-cover"            src={videoSrc}            autoPlay            loop            muted            playsInline          />        </foreignObject>      )}      <defs>        <clipPath id="android-clip">          <rect            width="360"            height="800"            rx="33"            ry="25"            className="fill-white dark:fill-[#262626]"            transform="translate(9 14)"          />        </clipPath>      </defs>    </svg>  );};

With Video Content

Loading component...

"use client";import { SVGProps } from "react";export interface AndroidProps extends SVGProps<SVGSVGElement> {  width?: number;  height?: number;  src?: string;  videoSrc?: string;}export const Android = ({  width = 433,  height = 882,  src,  videoSrc,  ...props}: AndroidProps) => {  return (    <svg      width={width}      height={height}      viewBox={`0 0 ${width} ${height}`}      fill="none"      xmlns="http://www.w3.org/2000/svg"      {...props}    >      <path        d="M376 153H378C379.105 153 380 153.895 380 155V249C380 250.105 379.105 251 378 251H376V153Z"        className="fill-[#E5E5E5] dark:fill-[#404040]"      />      <path        d="M376 301H378C379.105 301 380 301.895 380 303V351C380 352.105 379.105 353 378 353H376V301Z"        className="fill-[#E5E5E5] dark:fill-[#404040]"      />      <path        d="M0 42C0 18.8041 18.804 0 42 0H336C359.196 0 378 18.804 378 42V788C378 811.196 359.196 830 336 830H42C18.804 830 0 811.196 0 788V42Z"        className="fill-[#E5E5E5] dark:fill-[#404040]"      />      <path        d="M2 43C2 22.0132 19.0132 5 40 5H338C358.987 5 376 22.0132 376 43V787C376 807.987 358.987 825 338 825H40C19.0132 825 2 807.987 2 787V43Z"        className="fill-white dark:fill-[#262626]"      />      <g clipPath="url(#android-clip)">        <path          d="M9.25 48C9.25 29.3604 24.3604 14.25 43 14.25H335C353.64 14.25 368.75 29.3604 368.75 48V780C368.75 798.64 353.64 813.75 335 813.75H43C24.3604 813.75 9.25 798.64 9.25 780V48Z"          className="fill-[#E5E5E5] stroke-[#E5E5E5] stroke-[0.5] dark:fill-[#404040] dark:stroke-[#404040]"        />      </g>      <circle        cx="189"        cy="28"        r="9"        className="fill-white dark:fill-[#262626]"      />      <circle        cx="189"        cy="28"        r="4"        className="fill-[#E5E5E5] dark:fill-[#404040]"      />      {src && (        <image          href={src}          width="360"          height="800"          className="size-full object-cover"          preserveAspectRatio="xMidYMid slice"          clipPath="url(#android-clip)"        />      )}      {videoSrc && (        <foreignObject          x="9"          y="14"          width="360"          height="800"          clipPath="url(#android-clip)"        >          <video            className="size-full object-cover"            src={videoSrc}            autoPlay            loop            muted            playsInline          />        </foreignObject>      )}      <defs>        <clipPath id="android-clip">          <rect            width="360"            height="800"            rx="33"            ry="25"            className="fill-white dark:fill-[#262626]"            transform="translate(9 14)"          />        </clipPath>      </defs>    </svg>  );};

API Reference

Prop	Type	Default	Description
`width`	`number`	`433`	Width of the device mockup in pixels
`height`	`number`	`882`	Height of the device mockup in pixels
`src`	`string`	`undefined`	Image source URL to display within the device screen
`videoSrc`	`string`	`undefined`	Video source URL to display within the device screen
`className`	`string`	`undefined`	Additional CSS classes to apply to the SVG element

Usage Notes

The component extends SVGProps<SVGSVGElement>, so all standard SVG properties are supported
When both src and videoSrc are provided, the video takes precedence
The device frame automatically adapts to light and dark themes
Content is automatically clipped to fit within the rounded screen area
Videos are set to autoplay, loop, and are muted by default for optimal user experience

Use Cases

This free open source React component is perfect for:

Next.js portfolios - Showcase mobile applications with TypeScript integration
App presentations - Display mobile app screenshots in realistic Android device frames
shadcn/ui projects - Integrate device mockups into your design system workflows
Marketing websites - Present mobile applications with professional device mockups using Tailwind CSS
Product demos - Create engaging product demonstrations with video content
Developer documentation - Show mobile app features within authentic device contexts
Client presentations - Impress clients with realistic mobile app presentations using JavaScript
Design portfolios - Display mobile design work in context of actual devices

Technical Details

SVG-Based Architecture

This open source component uses modern SVG technology:

Scalable vector graphics for crisp rendering at any size
CSS class integration with Tailwind CSS for consistent theming
Efficient DOM structure optimized for React rendering performance
TypeScript type safety ensuring reliable prop validation

Performance Optimizations

Lightweight SVG rendering with minimal JavaScript footprint
Next.js compatible with server-side rendering and static generation support
GPU-accelerated transforms using CSS properties for smooth animations
Optimized clip paths for efficient content masking without performance impact

Accessibility

This component includes accessibility features:

Semantic SVG structure with proper ARIA attributes for screen readers
React-compatible focus management when used in interactive Next.js applications
Responsive design that adapts to different viewport sizes and orientations
High contrast support with automatic dark mode adaptation using Tailwind CSS

Android

Reactandroid

Reactandroid

Reactandroid

On this page