EV controls

Build with Vlak
09:41Vehicle systems18°C
Connected
Vehicle 01Electric concept
Electric vehicle concept, side-profile line illustration
Ready when you areDoors locked · parked

Range

386km

Estimated range

Ready for your next journey

Battery

84%
°
Climate on · both zonesComfort temperature
Media
Fortress DownLoathe

Choose a vehicle view → adjust the cabin → control media

View source

Inside the interface

An electric vehicle concept developed from the vehicle study in the Vlak films. A line illustration anchors the display above range, battery, cabin, and media panels. Large values and short labels make the lower row easy to scan.

The vehicle silhouette connects the study to the Vlak films. Vehicle settings, journey details, and electric-system data are fictional. The player shows Fortress Down by Loathe; playback controls are simulated and do not stream audio.

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

  • Four Cards share borders beneath the vehicle illustration. Metrics and the numeric cabin input share the same label and value tracks. Narrow layouts stack the panels without clipping their controls.
  • Toggle group switches Vehicle, Journey, and Energy views. Buttons and Icons handle local vehicle settings, climate, and media, retaining the small control radius and centered icon geometry.
  • Playback controls and Media scrubber provide reusable transport and seeking with space before the track. Number field stacks temperature actions at the top right. Connection status aligns the icon and text in the header.
  • On mobile, Vehicle, Controls, and Media replace the four-column dashboard. Vehicle keeps the illustration and journey actions in focus; settings become readable control rows, and media gets a dedicated playback screen. State is shared between views.