UI mockups · Mobile app
Smart home app UI mockup
A mobile smart home controller: rooms at a glance with scenes and a door lock, a room screen with light and device controls, and a thermostat with schedule.
The 3 screens
Smart home app: Home, Living room, Thermostat. Each screen below is drawn from the mockup itself, with the headings, buttons, fields and lists that are on it.
1Home Home
Phone screen with 6 paragraphs, 5 cards, 5 icons, 5 labels, 4 toggles, 2 headings, 2 stat / KPIs, an avatar and 4 more component types.
- Headings
- 14 Elm Street · Rooms
- Navigation
- Morning · Away · Night · Home · Rooms · Automations · Settings
- Buttons and actions
- Unlock
- Text and labels
- Welcome home, Theo · Inside 21.5°C · Energy today 6.8 kWh · Edit · Living room · 4 devices on · Kitchen · 2 devices on · Bedroom · All off · Office · 1 device on · Front door · Locked · 8 min ago
2Living room Living room
Phone screen with 8 paragraphs, 6 cards, 6 labels, 5 toggles, 2 icons, 2 segmented controls, a button, a heading and 2 more component types.
- Headings
- Living room
- Navigation
- All · Lights · Media · Climate · Warm · Neutral · Cool · Home · Rooms · Automations · Settings
- Buttons and actions
- Run
- Text and labels
- Home · 21.8°C · 4 of 6 devices on · Ceiling lights · 80% · Warm white · Floor lamp · On · 40% · TV · Off · Speaker · Playing · Air purifier · Auto · quiet · Movie night · Lights dim, blinds close
3Thermostat Thermostat
Phone screen with 4 icons, 4 paragraphs, 2 headings, a badge, a card, a chart, an inset grouped list, a segmented control and 1 more component types.
- Headings
- Thermostat · 22.0° · Schedule
- Navigation
- Heat · Cool · Auto · Off
- Lists and columns
- Weekdays 6:30 → 21°C · Every night 22:30 → 18°C
- Text and labels
- Living room · Heating · Now 21.5°C · 16° · 28° · Temperature, last 24 h
Open and edit it
The smart home app mockup is free on every Tierslate plan. Opened in the editor it becomes a board of your own: every component is a real shape you can move, resize, retext or recolour, you can add screens from the web, iOS and Android component library, and React code can be generated from the screens. In the editor it is under Templates, on the Mockups tab.
More mockups
- Food delivery app UI mockup - Browse restaurants, pick dishes, check out and follow the courier - four mobile screens.
- Banking app UI mockup - A mobile bank - balance with quick actions and recent activity, a transaction detail and a send-money flow.
- Social feed UI mockup - A photo-sharing app - stories and a post feed, a new-post composer and a profile with stats and a photo grid.
- Music player UI mockup - A mobile music app: a library with playlists and recently played tracks, and a now-playing screen with album art, progress and playback controls.
- iOS fitness app UI mockup - An iPhone activity tracker in the iOS 17/18 look: large-title navigation, activity rings, widgets, inset grouped lists, a tab bar, a settings sheet, an action sheet and an alert over the keyboard.
- Android mail app UI mockup - A Material 3 (Material You) email client: search bar, filter chips, inbox list, FAB, navigation drawer, message view, compose with a dialog, a schedule-send bottom sheet, and a tablet layout with a navigation rail and date/time pickers.