iPhone Duo

Build with Vlak
Your phone, your wayEveryday apps, in Vlak
iPhone DuoiOS 27

Home screen

Sample system · Changes stay in this tab
Local apps and sample data. Your work stays here as you change devices.

Open an app → create or edit → return Home or explore system controls

Inside the interface

A focused iPhone workspace with a Home screen, App Library and sixteen local apps. Contextual back navigation, grouped settings and separate Control and Notification Centers preserve the platform structure. Open an app, edit its records and return Home through the indicator.

This browser study keeps app data in the current tab. Calls, email, messages, camera captures, weather and device switches are local demonstrations. It does not operate a phone or connect to account services.

Components used

Component anatomy and measurements from Apple’s iOS 27 UI Kit, rebuilt for the browser with Vlak typography and surfaces. Component reference.

Related: iPhone Duo React components and Markdown reference.

Use this as a starting point

Build with Vlak

Install the components, add the stylesheet, and bring your own content. The study’s source shows how the pieces fit together.

React componentsCSS includedMIT licensed
Install the package
npm install @noorddev/vlak-react
import "@noorddev/vlak-react/css";
Installation guide View study source

Start with your coding agent

A ready-to-use brief with this study, Vlak’s components, and the design guide.

Component modifications

  • A Home indicator, App Library, contextual back navigation and separate Control and Notification Centers retain iPhone navigation conventions.
  • Platform-specific native checkbox and range inputs reproduce iOS switch and slider geometry. The platform hierarchy uses Vlak’s Inter typography and monochrome palette.
  • The iOS route renders one device. Change its hardware profile, open or fold a supported display, or rotate it while preserving the mounted app, records and settings.
  • Core apps provide local editing and useful actions. The music player synthesizes browser audio, while the other simulated services report their local scope.
  • On mobile, iOS opens at readable app size. View device switches to the proportional hardware drawing, while Use phone returns to the unscaled app. Contextual Back, the Home indicator and system centers remain reachable, and full-screen preview preserves the mounted workspace.