@junhoyeo/iphone

🏴‍☠️ @junhoyeo/iphone

🏝️ iPhone 14 Pro with dynamic island, on the web.

Warning
This package is under rapid development 🛠

1yarn add @junhoyeo/iphone

1import { Phone, type GridItemProps } from '@junhoyeo/iphone';
2
3import '@junhoyeo/iphone/dist/style.css';
4
5const APPS: GridItemProps[] = [];
6const DOCK: GridItemProps[] = [];
7const BACKGROUND_IMAGE_URL: string = '';
8
9<Phone
10  appBarBrightness="dark"
11  frameColor="purple"
12  transformScale={1}
13  apps={APPS}
14  dock={DOCK}
15  backgroundImage={BACKGROUND_IMAGE_URL}
16  dynamicIslandProps={{ ... }}
17>
18  <AppBar />
19  <Screen>
20    <Iframe src="/demo" allowTransparency />
21  </Screen>
22</Phone>

• Special thanks to Sunghyun Cho(@anaclumos)! The implementation of Dynamic Island was made possible by his work.
• If you found this project interesting, please consider following me(GitHub/Twitter) or ⭐️ giving it a star.

Powered by

• Fork of anaclumos/dynamic-island
• picturepan2/devices.css

Powers

• junhoyeo/junho.io