Android Frame
newA Pixel-style handset drawn in CSS, with a punch-hole camera.
9:30
Design crew
4 online
Today
AK
Ana
New device frames are in. Can someone check them in dark mode?On it. The bezels follow the theme tokens, so it should just work.
JM
mockups-v3.pdf2.4 MB
Looks great on both 🎉
AK
Installation
npx shadcn@latest add @blank/android-frameUsage
import { AndroidFrame } from "@/components/ui/android-frame"<AndroidFrame className="w-72" src="/app-screenshot.png" alt="Chat app" />Like the iPhone Frame, it is sized by width alone and measured in container units, so the two sit side by side at the same scale.
Examples
Side by side
9:41
Tuesday
Activity
8,412
steps of a 10,000 goal
Move 420 / 500 kcal
Exercise 24 / 30 min
Stand 9 / 12 h
M
T
W
T
F
S
S
Morning run5.2 km · 28 min
9:41
Tuesday
Activity
8,412
steps of a 10,000 goal
Move 420 / 500 kcal
Exercise 24 / 30 min
Stand 9 / 12 h
M
T
W
T
F
S
S
Morning run5.2 km · 28 min