Transit app

Build with Vlak
A day outKeep the journey simple
A little further from the everyday

Where to next?

From
To
Illustrative timetable

3 ways to get there

12 September 2026

Sample times and platforms. No live service or ticketing connection.

Local demoSample timetable · Saved in this tab

Choose stations and time → inspect a sample route → save it to your travel day

View source
About this download

A standalone Vite and React project using Vlak 0.5.0. Extract the ZIP, open its folder, then run npm install and npm run dev. Requires Node 22.12 or newer.

Routes, times and platforms are illustrative. Saved journeys and preferences stay in this tab. No live timetable, booking or ticketing service is connected.

Installation and base examples

Inside the interface

One working travel planner in a shared Vlak language. Choose stations, a date, and a departure time, compare illustrative route options, then inspect the stops and save a journey. Your travel day shows the actual saved records for its selected date. Desktop navigation becomes focused planner, journey, travel day, and profile screens on narrow layouts.

Times, durations, connections, and platforms are illustrative sample data. The planner has no live timetable, booking, or ticketing connection. Your name, preferences, and saved journeys stay in this tab.

Watch the 20-second walkthrough

A short walkthrough of the working transit app study.

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

Download the Transit app starter

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

  • Select chooses the departure and destination stations, and native date and time inputs define the search. Buttons swap stations, find sample routes, and save the selected journey.
  • Description list and a custom stop diagram keep exact times, endpoints, changes, and next-day arrivals together. Today filters actual saved journeys by date; Input and Switch edit the local profile and direct-route preference.
  • Desktop navigation keeps the planner, itinerary, and profile close. Narrow layouts use dedicated screens with pinned navigation, a reachable save action, and focus restoration when returning from journey details.
  • On mobile, one full-width travel app keeps Plan, Today, and Profile in bottom navigation; journey details have a pinned save action and Back focus restoration. The same stations, profile, preferences, and saved trips persist between screens. Native date entry receives its own full-width row.