Hi, everyone.
Excited to share my newest Homekit-inspired dashboard for some inspiration!
Inspired by Future prototype of Home Assistant
Credit for title card: ui-minimalist.
Cards:
Button-Card GitHub - custom-cards/button-card: ❇️ Lovelace button-card for home assistant
Card-Mod GitHub - thomasloven/lovelace-card-mod: 🔹 Add CSS styles to (almost) any lovelace card
Vertical Stack In Card GitHub - ofekashery/vertical-stack-in-card: 📐 Home Assistant Card: Group multiple cards into a single sleek card.
Stack In Card by @RomRider GitHub - custom-cards/stack-in-card: 🛠 group multiple cards into one card without the borders
Home page
views:
- title: Home
icon: mdi:home
path: home
cards:
- type: custom:mushroom-chips-card
chips:
- type: menu
- type: spacer
- type: action
icon: mdi:microphone
tap_action:
action: assist
- type: action
icon: mdi:plus
- type: template
icon: mdi:dots-vertical
entity: input_boolean.themes_homekit
tap_action:
action: toggle
- type: custom:button-card
tap_action:
action: none
show_icon: false
show_label: true
show_name: true
styles:
card:
- background-color: rgba(0,0,0,0)
- box-shadow: none
- height: auto
- width: auto
- margin-top: 6px
- margin-left: 6px
- margin-bottom: 0px
- padding: 2px
grid:
- grid-template-areas: '''n'' ''l'''
- grid-template-columns: 1fr
- grid-template-rows: min-content min-content
name:
- justify-self: start
- font-weight: bold
- font-size: 2.5rem
label:
- justify-self: start
- font-weight: bold
- font-size: 1rem
- opacity: '0.4'
name: |
[[[
return (entity.state)
]]]
entity: sensor.greeting
- type: horizontal-stack
cards:
- type: custom:button-card
state:
- operator: template
value: |
[[[ return entity.state > '1' ]]]
styles:
card:
- background: null
styles:
grid:
- grid-template-columns: 40px 1fr
- grid-template-rows: min-content min-content
- grid-template-areas: '"i n" "i l"'
card:
- padding: 5px
img_cell:
- justify-self: start
- width: 30px
- height: 30px
- margin-left: '-3px'
icon:
- width: 22px
- color: '#FF9843'
name:
- justify-self: start
- font-size: 14px
- opacity: '0.7'
- font-weight: 500
- padding: 2px 0
label:
- justify-self: start
- font-size: 16px
- padding: 2px 0
name: Climate
entity: sensor.vindusensor_temperature
icon: mdi:thermometer
tap_action:
action: navigate
navigation_path: /ui-lovelace-minimalist/homekit-klima
label: |
[[[
return (entity.state) + '°C'
]]]
show_label: true
- type: custom:button-card
state:
- operator: template
value: |
[[[ return entity.state > '1' ]]]
styles:
card:
- background: null
styles:
grid:
- grid-template-columns: 40px 1fr
- grid-template-rows: min-content min-content
- grid-template-areas: '"i n" "i l"'
card:
- padding: 5px
img_cell:
- justify-self: start
- width: 30px
- height: 30px
- margin-left: '-3px'
icon:
- width: 22px
- color: '#FFDD95'
name:
- justify-self: start
- font-size: 14px
- font-weight: 500
- opacity: '0.7'
- padding: 2px 0
label:
- justify-self: start
- font-size: 16px
- padding: 2px 0
name: Lights
entity: sensor.current_lights_on
icon: mdi:lightbulb
tap_action:
action: navigate
navigation_path: /ui-lovelace-minimalist/homekit-lys
label: |
[[[
return (entity.state) + ' på'
]]]
show_label: true
- type: custom:button-card
state:
- operator: template
value: |
[[[ return entity.state > '1' ]]]
styles:
card:
- background: null
styles:
grid:
- grid-template-columns: 40px 1fr
- grid-template-rows: min-content min-content
- grid-template-areas: '"i n" "i l"'
card:
- padding: 5px
img_cell:
- justify-self: start
- width: 30px
- height: 30px
- margin-left: '-3px'
icon:
- width: 22px
- color: '#D24545'
name:
- justify-self: start
- font-size: 14px
- font-weight: 500
- opacity: '0.7'
- padding: 2px 0
label:
- justify-self: start
- font-size: 16px
- padding: 2px 0
name: Sikkerhet
entity: lock.dor_las_3
icon: mdi:lock
tap_action:
action: navigate
navigation_path: /ui-lovelace-minimalist/homekit-sikkerhet
label: |
[[[
return (entity.state)
]]]
show_label: true
- type: custom:button-card
tap_action:
action: navigate
navigation_path: /ui-lovelace-minimalist/homekit-inngang
show_icon: false
show_label: true
show_name: true
styles:
card:
- background-color: rgba(0,0,0,0)
- box-shadow: none
- height: auto
- width: auto
- margin-top: 6px
- margin-left: 10px
- margin-bottom: 0px
- padding: 2px
grid:
- grid-template-areas: '''n'' ''l'''
- grid-template-columns: 1fr
- grid-template-rows: min-content min-content
name:
- justify-self: start
- font-weight: bold
- font-size: 1.3rem
label:
- justify-self: start
- font-weight: bold
- font-size: 0.1rem
- opacity: '0.4'
name: Kamera
- type: horizontal-stack
cards:
- show_state: false
show_name: false
camera_view: auto
type: picture-entity
image: https://demo.home-assistant.io/stub_config/bedroom.png
entity: camera.ringeklokke_high
aspect_ratio: '9:10'
- show_state: false
show_name: false
camera_view: auto
type: picture-entity
image: https://demo.home-assistant.io/stub_config/bedroom.png
entity: camera.g3_high_2
- type: custom:button-card
tap_action:
action: navigate
navigation_path: /ui-lovelace-minimalist/homekit-inngang
show_icon: false
show_label: true
show_name: true
styles:
card:
- background-color: rgba(0,0,0,0)
- box-shadow: none
- height: auto
- width: auto
- margin-top: 6px
- margin-left: 10px
- margin-bottom: 0px
- padding: 2px
grid:
- grid-template-areas: '''n'' ''l'''
- grid-template-columns: 1fr
- grid-template-rows: min-content min-content
name:
- justify-self: start
- font-weight: bold
- font-size: 1.3rem
label:
- justify-self: start
- font-weight: bold
- font-size: 0.1rem
- opacity: '0.4'
name: Inngang
- type: horizontal-stack
cards:
- type: custom:mushroom-lock-card
entity: lock.dor_las_3
fill_container: true
- type: vertical-stack
cards:
- type: tile
entity: light.inngang_bord_lampe
- type: tile
entity: light.ute_lys_inngang
- type: horizontal-stack
cards:
- type: vertical-stack
cards:
- type: tile
entity: alarm_control_panel.alarm
state_content:
- state
- last-changed
- type: tile
entity: cover.garasje_apner
state_content:
- state
- last-changed
- features:
- type: target-temperature
type: tile
entity: climate.trappegang_panelovn
vertical: false
- type: custom:button-card
tap_action:
action: navigate
navigation_path: /ui-lovelace-minimalist/homekit-inngang
show_icon: false
show_label: true
show_name: true
styles:
card:
- background-color: rgba(0,0,0,0)
- box-shadow: none
- height: auto
- width: auto
- margin-top: 6px
- margin-left: 10px
- margin-bottom: 0px
- padding: 2px
grid:
- grid-template-areas: '''n'' ''l'''
- grid-template-columns: 1fr
- grid-template-rows: min-content min-content
name:
- justify-self: start
- font-weight: bold
- font-size: 1.3rem
label:
- justify-self: start
- font-weight: bold
- font-size: 0.1rem
- opacity: '0.4'
name: Pult
- type: horizontal-stack
cards:
- type: tile
entity: light.color_temperature_light_1_2
features:
- type: light-brightness
- type: vertical-stack
cards:
- type: tile
entity: light.pult_skjermer_2
state_content:
- state
- last-changed
- type: tile
entity: media_player.pult_2
state_content:
- state
- last-changed
- type: horizontal-stack
cards:
- type: vertical-stack
cards:
- type: tile
entity: script.jazz
- type: tile
entity: script.mp3
- features:
- type: fan-speed
type: tile
entity: fan.ceiling_fan
vertical: false
name: Pultvifte
- type: horizontal-stack
cards:
- type: tile
entity: media_player.soverom_2
state_content:
- state
- last-changed
- type: tile
entity: media_player.hoytalere
state_content:
- state
- last-changed
- type: custom:button-card
tap_action:
action: navigate
navigation_path: /ui-lovelace-minimalist/homekit-inngang
show_icon: false
show_label: true
show_name: true
styles:
card:
- background-color: rgba(0,0,0,0)
- box-shadow: none
- height: auto
- width: auto
- margin-top: 6px
- margin-left: 10px
- margin-bottom: 0px
- padding: 2px
grid:
- grid-template-areas: '''n'' ''l'''
- grid-template-columns: 1fr
- grid-template-rows: min-content min-content
name:
- justify-self: start
- font-weight: bold
- font-size: 1.3rem
label:
- justify-self: start
- font-weight: bold
- font-size: 0.1rem
- opacity: '0.4'
name: Soverom
- type: horizontal-stack
cards:
- type: tile
entity: climate.living_room
features:
- type: target-temperature
- type: vertical-stack
cards:
- type: tile
entity: light.color_temperature_light_1_3
vertical: false
features:
- type: light-brightness
- type: horizontal-stack
cards:
- features:
- type: target-temperature
type: tile
entity: light.nattbord_lampe
- features:
- type: target-temperature
type: tile
entity: light.color_temperature_light_1
- type: custom:button-card
tap_action:
action: navigate
navigation_path: /ui-lovelace-minimalist/homekit-inngang
show_icon: false
show_label: true
show_name: true
styles:
card:
- background-color: rgba(0,0,0,0)
- box-shadow: none
- height: auto
- width: auto
- margin-top: 6px
- margin-left: 10px
- margin-bottom: 0px
- padding: 2px
grid:
- grid-template-areas: '''n'' ''l'''
- grid-template-columns: 1fr
- grid-template-rows: min-content min-content
name:
- justify-self: start
- font-weight: bold
- font-size: 1.3rem
label:
- justify-self: start
- font-weight: bold
- font-size: 0.1rem
- opacity: '0.4'
name: Benk
- type: horizontal-stack
cards:
- type: tile
entity: fan.stavifte_socket_1
vertical: true
state_content:
- state
- last-changed
- type: vertical-stack
cards:
- type: tile
entity: light.benkbelysning_nanoleaf_light_strip
state_content:
- state
- last-changed
- type: tile
entity: switch.server_socket_1
state_content:
- state
- last-changed
- type: custom:button-card
tap_action:
action: navigate
navigation_path: /ui-lovelace-minimalist/homekit-inngang
show_icon: false
show_label: true
show_name: true
styles:
card:
- background-color: rgba(0,0,0,0)
- box-shadow: none
- height: auto
- width: auto
- margin-top: 6px
- margin-left: 10px
- margin-bottom: 0px
- padding: 2px
grid:
- grid-template-areas: '''n'' ''l'''
- grid-template-columns: 1fr
- grid-template-rows: min-content min-content
name:
- justify-self: start
- font-weight: bold
- font-size: 1.3rem
label:
- justify-self: start
- font-weight: bold
- font-size: 0.1rem
- opacity: '0.4'
name: Stue
- type: horizontal-stack
cards:
- features:
- type: target-temperature
type: tile
entity: climate.panelovn_stue
- type: vertical-stack
cards:
- type: tile
entity: light.taklampe_sofa_2
- type: tile
entity: light.stalampe
- type: horizontal-stack
cards:
- type: vertical-stack
cards:
- type: tile
entity: climate.panelovn_stue
state_content:
- state
- last-changed
- type: tile
entity: light.on_off_plug_1
- type: tile
entity: cover.markise
features:
- type: cover-open-close
- type: horizontal-stack
cards:
- type: tile
entity: light.color_light_1
state_content:
- state
- last-changed
- type: tile
entity: light.dimmable_light_1
state_content:
- state
- last-changed
- type: horizontal-stack
cards:
- type: tile
entity: light.sofa_reading_lamp
state_content:
- state
- last-changed
- type: tile
entity: light.dining_table_lamp
- type: horizontal-stack
cards:
- type: tile
entity: media_player.stua_2
state_content:
- state
- last-changed
- type: tile
entity: media_player.r_n602_stue_2
icon: mdi:amplifier
state_content:
- state
- last-changed
- type: custom:button-card
tap_action:
action: navigate
navigation_path: /ui-lovelace-minimalist/homekit-inngang
show_icon: false
show_label: true
show_name: true
styles:
card:
- background-color: rgba(0,0,0,0)
- box-shadow: none
- height: auto
- width: auto
- margin-top: 6px
- margin-left: 10px
- margin-bottom: 0px
- padding: 2px
grid:
- grid-template-areas: '''n'' ''l'''
- grid-template-columns: 1fr
- grid-template-rows: min-content min-content
name:
- justify-self: start
- font-weight: bold
- font-size: 1.3rem
label:
- justify-self: start
- font-weight: bold
- font-size: 0.1rem
- opacity: '0.4'
name: Kjøkken
- type: horizontal-stack
cards:
- type: tile
entity: climate.kjokken_ovn
features:
- type: target-temperature
- type: vertical-stack
cards:
- type: tile
entity: light.kjokken_spot
features:
- type: light-brightness
- type: horizontal-stack
cards:
- type: tile
entity: climate.kjokken_ovn
- type: tile
entity: light.0x50325ffffef534b2
state_content:
- state
- last-changed
- type: horizontal-stack
cards:
- type: tile
entity: climate.fryseskap_freezer
- type: tile
entity: light.kitchen_table_lamp
- type: custom:button-card
tap_action:
action: navigate
navigation_path: /ui-lovelace-minimalist/homekit-inngang
show_icon: false
show_label: true
show_name: true
styles:
card:
- background-color: rgba(0,0,0,0)
- box-shadow: none
- height: auto
- width: auto
- margin-top: 6px
- margin-left: 10px
- margin-bottom: 0px
- padding: 2px
grid:
- grid-template-areas: '''n'' ''l'''
- grid-template-columns: 1fr
- grid-template-rows: min-content min-content
name:
- justify-self: start
- font-weight: bold
- font-size: 1.3rem
label:
- justify-self: start
- font-weight: bold
- font-size: 0.1rem
- opacity: '0.4'
name: Bad
- type: horizontal-stack
cards:
- type: tile
entity: climate.bad
- type: horizontal-stack
cards:
- type: tile
entity: switch.hanklevarmer
state_content:
- power
- last-changed
- type: custom:mushroom-title-card
title: Ute
- type: horizontal-stack
cards:
- features:
- type: target-temperature
type: tile
entity: switch.sprinkler_switch
icon: mdi:sprinkler
vertical: true
- type: vertical-stack
cards:
- type: tile
entity: light.veranda_lampe_venstre
state_content:
- state
- last-changed
- type: tile
entity: light.veranda_lampe_hoyre
state_content:
- state
- last-changed
- type: custom:weather-card
entity: weather.to
- type: custom:vertical-stack-in-card
horizontal: true
cards:
- type: custom:mushroom-template-card
primary: Home
icon: mdi:home
tap_action:
action: navigate
navigation_path: /mushroom-homekit/home
layout: vertical
card_mod:
style:
mushroom-shape-icon$: |
.shape {
width: 66px !important;
height: 36px !important;
}
.: |
ha-card {
background: none;
}
:host {
--mush-icon-border-radius: 16px;
}
- type: custom:mushroom-template-card
primary: Media
icon: mdi:play-box-multiple-outline
tap_action:
action: navigate
navigation_path: /mushroom-homekit/media
layout: vertical
card_mod:
style:
mushroom-shape-icon$: |
.shape {
width: 66px !important;
height: 36px !important;
--shape-color: none;
}
.: |
ha-card {
background: none;
}
:host {
--mush-icon-border-radius: 16px;
}
- type: custom:mushroom-template-card
primary: Energy
icon: mdi:lightning-bolt-outline
tap_action:
action: navigate
navigation_path: /mushroom-homekit/energi
layout: vertical
card_mod:
style:
mushroom-shape-icon$: |
.shape {
width: 66px !important;
height: 36px !important;
--shape-color: none;
}
.: |
ha-card {
background: none;
}
:host {
--mush-icon-border-radius: 16px;
}
- type: custom:mushroom-template-card
primary: Map
icon: mdi:map-outline
tap_action:
action: navigate
navigation_path: /mushroom-homekit/map
layout: vertical
card_mod:
style:
mushroom-shape-icon$: |
.shape {
width: 66px !important;
height: 36px !important;
--shape-color: none;
}
.: |
ha-card {
background: none;
}
:host {
--mush-icon-border-radius: 16px;
}
card_mod:
style: |
:host {
z-index: 999;
position: sticky;
position: -webkit-sticky;
bottom: 0;
}
ha-card {
padding-bottom: 20px;
margin: 0px -13px -10px -13px;
border-radius: 0px;
}
.dark-mode ha-card {
background: var(--ha-card-background-dark);
}
.light-mode ha-card {
background: var(--ha-card-background-light);
}
- title: Map
path: map
icon: mdi:map-outline
cards:
- type: custom:mushroom-chips-card
chips:
- type: menu
- type: template
content: Kart
- type: spacer
- type: action
icon: mdi:plus
- type: map
entities:
- entity: person.s
- entity: person.c
- entity: person.r
dark_mode: false
- type: horizontal-stack
cards:
- type: tile
entity: person.s
show_entity_picture: true
- type: tile
entity: person.c
show_entity_picture: true
- type: tile
entity: person.r
show_entity_picture: true
- type: horizontal-stack
cards:
- type: vertical-stack
cards:
- type: tile
entity: zone.home
color: green
- type: tile
entity: zone.sd
color: pink
- type: tile
entity: zone.sd
color: primary
- type: vertical-stack
cards:
- type: tile
entity: sensor.waze_travel_time_2
color: green
- type: tile
entity: sensor.waze_travel_time_3
color: pink
- type: tile
entity: sensor.reisetid
color: primary
- type: custom:vertical-stack-in-card
horizontal: true
cards:
- type: custom:mushroom-template-card
primary: Home
icon: mdi:home-outline
tap_action:
action: navigate
navigation_path: /mushroom-homekit/home
layout: vertical
card_mod:
style:
mushroom-shape-icon$: |
.shape {
width: 66px !important;
height: 36px !important;
--shape-color: none;
}
.: |
ha-card {
background: none;
}
:host {
--mush-icon-border-radius: 16px;
}
- type: custom:mushroom-template-card
primary: Media
icon: mdi:play-box-multiple-outline
tap_action:
action: navigate
navigation_path: /mushroom-homekit/media
layout: vertical
card_mod:
style:
mushroom-shape-icon$: |
.shape {
width: 66px !important;
height: 36px !important;
--shape-color: none;
}
.: |
ha-card {
background: none;
}
:host {
--mush-icon-border-radius: 16px;
}
- type: custom:mushroom-template-card
primary: Energy
icon: mdi:lightning-bolt-outline
tap_action:
action: navigate
navigation_path: /mushroom-homekit/energi
layout: vertical
card_mod:
style:
mushroom-shape-icon$: |
.shape {
width: 66px !important;
height: 36px !important;
--shape-color: none;
}
.: |
ha-card {
background: none;
}
:host {
--mush-icon-border-radius: 16px;
}
- type: custom:mushroom-template-card
primary: Map
icon: mdi:map
tap_action:
action: navigate
navigation_path: /mushroom-homekit/map
layout: vertical
card_mod:
style:
mushroom-shape-icon$: |
.shape {
width: 66px !important;
height: 36px !important;
}
.: |
ha-card {
background: none;
}
:host {
--mush-icon-border-radius: 16px;
}
card_mod:
style: |
:host {
z-index: 999;
position: sticky;
position: -webkit-sticky;
bottom: 0;
}
ha-card {
padding-bottom: 20px;
margin: 0px -13px -10px -13px;
border-radius: 0px;
}
.dark-mode ha-card {
background: var(--ha-card-background-dark);
}
.light-mode ha-card {
background: var(--ha-card-background-light);
}
Summary
This text will be hidden