Creating a Home Assistant Dashboard for Tablets

I built a kitchen tablet dashboard that feels stripped back. It shows what I need at a glance and changes with real state, not guesswork. The point is a clean Home Assistant dashboard on a tablet, with cards that change when the house does.

Getting Started with Your Home Assistant Dashboard

Overview of Home Assistant Dashboard

Home Assistant Dashboard is the Lovelace frontend that sits on top of Home Assistant. It shows views, cards and controls tied into your devices and sensors. I treat it as a control panel, not a wall of telemetry. Use the Lovelace raw editor or YAML mode when you need exact behaviour. For a tablet, the companion app or a kiosk browser gives the best full-screen setup.

Essential Tools and Resources

You will need:

A running Home Assistant instance (Core or OS).
HACS installed to manage custom cards and integrations.
The Home Assistant Companion app for iOS/Android, or a kiosk browser for full-screen.
Custom cards: custom:button-card, card-mod, and conditional card.
Basic YAML familiarity for template sensors and view layout.

Install HACS first, then add custom:button-card and card-mod from HACS. They are the bits that make the layout work.

Preparing Your Tablet for Dashboard Use

Decide where the tablet will live. Wall-mounted or on a stand changes the screen orientation and touch targets. On iOS, use Guided Access to lock the app and stop accidental gestures. On Android, use kiosk mode or an app that forces full-screen. Turn off auto-lock or set it long enough to avoid repeated unlocks. Set the tablet to a stable IP, or reserve it in your router, so the dashboard stays reachable.

Charge management matters. If the tablet reboots on power loss, have a startup script or Home Assistant automation open the dashboard. I set mine to auto-launch the Companion app and go straight to the kitchen view.

Key Considerations for Customization

Decide what the tablet must show at a glance. Put actions and states first. Keep touch targets large. Use clear contrast and a minimal palette so it still reads well in different light. Think about offline behaviour. If Home Assistant is unreachable, show cached states or a clear offline card rather than a blank screen. Lock critical controls behind an extra confirmation if the tablet sits in a public part of the house.

Designing Your Custom Dashboard

Inspiration from iOS Design Principles

I borrowed a few iOS ideas: simple spacing, rounded corners, subtle shadows and a clear hierarchy. Icons sit above labels. Important controls are larger and centred. Colour is used for state changes, not decoration. That keeps the interface readable from across the kitchen table and makes touch actions predictable.

Creating Changing Cards

Cards can change based on sensors and time. Use conditional cards and template sensors to show the right controls when they are relevant.

Steps I use:

Create template sensors in configuration.yaml for derived states.
Use conditional cards to show cards only when conditions match.
Use entity-filter or auto-entities (HACS) for lists that update on their own.

Example template sensor that defines a simple kitchen mode:

template:
  - sensor:
      - name: "kitchen_mode"
        state: >
          {% if is_state('binary_sensor.kitchen_motion', 'on') %}
            active
          {% elif states('sensor.kitchen_ambient_light')|float < 20 %}
            dim
          {% else %}
            idle
          {% endif %}

Example conditional card showing a recipe timer only when the oven is on:

type: conditional
conditions:
  - entity: switch.oven
    state: 'on'
card:
  type: entities
  title: Oven controls
  entities:
    - entity: timer.roast
    - entity: input_number.oven_temp

These patterns let the dashboard shift while I am cooking. I prefer fewer relevant controls rather than everything at once.

Configuring Custom Button Cards

custom:button-card sits at the centre of my layout. It supports templates, state-based styling and actions.

Example button template:

type: 'custom:button-card'
entity: light.kitchen_main
name: Kitchen
icon: mdi:lightbulb
show_state: true
tap_action:
  action: toggle
styles:
  card:
    - border-radius: 12px
    - padding: 12px
  name:
    - font-size: 14px
state:
  - value: 'on'
    color: '#ffd166'
    styles:
      card:
        - box-shadow: '0 6px 12px rgba(0,0,0,0.12)'

I keep a small set of templates: primary action, small indicator and large media control. Reuse keeps the UI consistent and makes changes less painful.

YAML Configuration for Home Assistant

I keep the kitchen view in Lovelace YAML so I can use templates and include files. If you prefer the UI editor, switch to the raw editor when a custom card needs more control.

Minimal view example:

views:
  - title: Kitchen
    path: kitchen
    cards:
      - type: grid
        columns: 3
        square: false
        cards:
          - type: 'custom:button-card'
            <<: *kitchen-primary
          - type: conditional
            conditions:
              - entity: sensor.kitchen_mode
                state: 'active'
            card:
              type: 'custom:button-card'
              name: 'Cooking timer'
              tap_action:
                action: navigate
                navigation_path: /lovelace-kitchen/timer

Use the Raw configuration editor to paste snippets like this, or keep them in packages if that suits your setup better. Make small changes and reload Lovelace to test.

Final Touches and Testing

Test every interaction with the tablet in place. Check whether the tap targets feel right when standing. Check whether the screen stays readable in bright light. Simulate offline states by stopping Home Assistant briefly and confirm the fallback UI is acceptable. Check that automations tied to buttons behave properly. Tune polling and entity refresh rates if latency gets in the way.

Concrete checks I run:

Tap each button and verify the mapped entity changes state.
Turn devices on via other interfaces and confirm the dashboard updates.
Switch to night mode and confirm colour and contrast still work.
Reboot the tablet and confirm the Companion app returns to the kitchen view.

If a card behaves oddly, inspect the browser console on the tablet with remote debugging and check Home Assistant logs. Small fixes often sort out larger UI problems.

Designing a Home Assistant dashboard for tablets