Android
androidFrames content inside an Android phone device mockup.
Usage
Basic usage
The Android casing with a centered punch-hole camera wraps the screen content, the default is Pixel 9 Pro.
Hulian AppAndroid screen
tsx
<Android>
<img src="/app.png" alt="" />
</Android>Select model
model Switch the default model and determine the default width.
Hulian AppAndroid screen
tsx
<Android model="galaxy-s24-ultra">
<img src="/app.png" alt="" />
</Android>Custom width
width takes precedence over the model default width when passed in explicitly.
Hulian AppAndroid screen
tsx
<Android width={220}>
<img src="/app.png" alt="" />
</Android>Picture content
Pass imageSrc and directly render the App screenshot (priority to children).
Hulian AppAndroid screen
tsx
<Android model="pixel-9-pro" imageSrc="/app.png" />When to Use
Use it to present an app screenshot or mobile page inside an Android device frame with a hole-punch camera. Pixel and Galaxy dimensions are available. Use iPhone for an iPhone frame, Tablet for a tablet, or Safari and Chrome for browser windows.
Import
ts
import { Android, ANDROID_MODELS } from "@hulianui/ui"Props
Extends ComponentPropsWithoutRef<"div">. ANDROID_MODELS exports the model-to-width mapping.
| Name | Type | Default | Description |
|---|---|---|---|
| model | "pixel-9-pro-xl" | "pixel-9-pro" | "pixel-9" | "galaxy-s24-ultra" | "galaxy-s24" | — ("pixel-9-pro" in the showcase) | Optional model used to resolve the width; the component itself has no model default |
| width | number | Model width, or 280 without a model | Device width in pixels; an explicit value takes precedence over model |
| imageSrc | string | — | Screen image URL; takes precedence over children |
Slots
| Slot | Type | Description |
|---|---|---|
| children | ReactNode | Custom screen content |
Usage Guidelines
- The component fixes the device proportions with
aspectRatio.modelandwidthaffect only the width, not the aspect ratio. - When both
imageSrcandchildrenare provided,imageSrcwins.
Related
Playground
Hulian AppAndroid screen
<Android model="pixel-9-pro">
<img src="/app.png" />
</Android>