Mobile platforms

Build with Vlak
One trip, two platformsThe same content in native patterns

iOS Large titles · tab bar

9:41● ● ▰
Saturday, 12 SeptemberRotterdam
10:24
Intercity 1135

Amsterdam Centraal → Rotterdam Centraal

On time

Today

11:08
Walk to Depot Noord18 min
12:00
Design reviewStudio 2
15:42
Train to AmsterdamPlatform 6

Android App bar · navigation bar

9:415G · 82%
Travel planRotterdam
10:24
Intercity 1135

Amsterdam Centraal → Rotterdam Centraal

On time

Today

11:08
Walk to Depot Noord18 min
12:00
Design reviewStudio 2
15:42
Train to AmsterdamPlatform 6

Compare the same itinerary, actions, and states across platforms

View source

Inside the interface

The same Rotterdam itinerary shown on an iPhone and an Android device. Train information, appointments, and destinations match. Header treatment, navigation, and action placement change to reflect the conventions of each platform.

Switch tabs, save the trip, and open the profile on either device. Each web preview keeps its own local state.

Components used

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

  • Both devices reuse the same Vlak Icons for Plan, Today, and You, keeping destinations recognizable across the two layouts.
  • Card holds the train summary in both devices. Local spacing and colors adapt it to each platform while retaining the same departure, route, and status.
  • Navigation, itinerary rows, and phone frames are custom. iOS uses a large title and tab bar; Android uses an app bar, navigation bar, and separate save action.
  • On mobile, an iOS/Android picker shows one full-width handset at a time instead of shrinking two phones side by side. Both keep their own saved-trip and navigation state, with a scrollable content area and persistent platform-specific navigation.