📱 Material Popup Card

NOTE

✨ Available on 💎 Ultimate Version Only

✨ Overview

The Material Popup Card allows you to create modal popups in your dashboard that can contain any other lovelace card. It mimics the behavior of modern mobile app sheets, providing a smooth and integrated user experience. Trigger it via browser navigation hash changes.

☀️ Light Mode

🌙 Dark Mode

✨ Key Features

• Hash-based Trigger: Opens automatically when the URL hash matches the configured value (e.g., #popup).
• Drag-to-Close: Supports intuitive swipe-down gestures to close the popup on mobile.
• Backdrop Blur: Customizable backdrop blur effect for a modern aesthetic.
• Nested Cards: Can contain any number of standard or custom lovelace cards.
• Header Customization: Optional header with title, icon, and additional action buttons.
• Auto-Close: Configurable timer to automatically close the popup.

⚙️ Configuration

Name	Type	Default	Description
type	string	Required	custom:material-popup-card
hash	string	#popup	The URL hash that triggers this popup to open.
cards	list	[]	A list of cards to display inside the popup.
header	object	Optional	Configuration for the popup header.
settings	object	Optional	Behavior settings like auto-close and drag sensitivity.
style	object	Optional	Visual customization options.

Header Options (header)

Name	Type	Default	Description
show_header	boolean	true	Whether to display the header.
name	string	Popup	Title text displayed in the header.
icon	string	Optional	Icon displayed next to the title.
entity	string	Optional	Entity to display state/toggle in the header.
button_type	string	name	Controls header interaction: switch, state, or name.
sub_buttons	list	[]	List of additional icon buttons in the header.

Settings Options (settings)

Name	Type	Description
auto_close	number	Time in milliseconds to auto-close the popup.
close_by_clicking_outside	boolean	Close the popup when clicking the backdrop.
slide_to_close_distance	number	Distance in pixels required to swipe down to close.

Style Options (style)

Name	Type	Description
width_mobile	number	Width percentage on mobile devices.
width_desktop	number	Width in pixels on desktop.
border_radius	number	Border radius of the popup card in pixels.
backdrop_blur	number	Blur amount for the backdrop in pixels.

🚀 Usage Examples

Example Configuration:

type: custom:material-popup-card
hash: "#living-room"
header:
  name: Living Room Controls
  icon: mdi:sofa
  entity: light.living_room
  button_type: switch
cards:
  - type: entities
    entities:
      - entity: light.living_room_main
      - entity: switch.tv_plug
style:
  backdrop_blur: 5
  border_radius: 24