Android

Build with Vlak
Your phone, your wayEveryday apps, in Vlak
Google Pixel 11Material 3 Expressive

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 with Back, Home or Recents

View source

Inside the interface

A focused Android workspace with a Home screen, All Apps drawer and sixteen local apps. Material app bars, floating actions, grouped settings and gesture navigation preserve the platform structure. Open an app, edit its records and use Quick Settings without leaving the phone.

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 from Material 3 Expressive, adapted with Vlak typography and surfaces. Component reference.

Related: Android 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

  • An All Apps drawer, Home gesture, app bars, floating actions and a Quick Settings shade retain Android navigation conventions. Explicit Back and Recents controls remain available below the device.
  • Platform-specific native checkbox and range inputs reproduce Material switch and slider geometry. The platform hierarchy uses Vlak’s Inter typography and monochrome palette.
  • The Android route renders one device. Change its hardware profile or rotate its display 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, Android opens at readable app size. View device switches to the proportional hardware drawing, while Use phone returns to the unscaled app. Back, Home, Recents and Quick Settings remain reachable, and full-screen preview preserves the mounted workspace.