Hass-Panel: The Simplest React-Based Control Panel for Home Assistant

Introduction

Hass-Panel is an incredibly user-friendly, React-based control panel designed specifically for Home Assistant. It aims to be the simplest solution for managing your smart home, offering one-click deployment to HAOS and requiring no programming experience. This project provides an intuitive, ready-to-use dashboard right out of the box, making smart home management accessible to everyone. Key features include a responsive design for both mobile and desktop, a highly configurable drag-and-drop layout, PWA support, and a beautiful user interface with light/dark themes and frosted glass effects. It also boasts a multi-user management system, secure password encryption, and robust camera support for various protocols.

Installation

Hass-Panel offers flexible installation methods, including Docker and a dedicated Home Assistant Add-on.

Docker Method (Stable)

docker run \
  --name hass-panel \
  --restart unless-stopped \
  --network host \
  -v ./data/:/config/hass-panel \
  -d \
  ghcr.io/mrtian2016/hass-panel:latest

Home Assistant Addon Method

For Home Assistant users, Hass-Panel can be easily installed as an add-on:

Click the "Add to Home Assistant" badge below:
Alternatively, manually add the repository:
- In Home Assistant's sidebar, navigate to "Configuration" -> "Add-ons" -> "Add-on Store".
- Click the three dots in the top right corner, then select "Repositories".
- Add the repository URL: https://github.com/mrtian2016/hass-panel.
- Click "Add" and refresh the page.
- Find and install "Hass Panel" in the add-on store.
- After starting, it can be accessed directly from the sidebar.

For detailed installation and configuration instructions, please refer to the official documentation.

Examples

Hass-Panel supports a wide array of card types to display and control various smart home entities. These cards are highly configurable and can be managed with drag-and-drop functionality.

Some supported card types include:

Time Card (TimeCard): Displays current time.
Weather Card (WeatherCard): Shows weather information, supporting AQI internationalization and wind direction.
Light Status Card (LightStatusCard): Provides control and status for lights.
Sensor Card (SensorCard): Monitors various sensor data.
Camera Card (CameraCard): Offers powerful camera support with WebRTC/ONVIF/RTSP protocols and HLS stream auto-detection.
Electricity Card (ElectricityCard): Optimized display for voltage, current, and power consumption statistics.
Universal Entity Card (UniversalCard): A versatile card supporting custom entity configuration and grouping.
PVE Card (PVECard): For monitoring Proxmox Virtual Environment virtual machines.
Server Card (ServerCard): Displays server monitoring information.

Card management features include showing/hiding controls, drag-and-drop sorting, custom sizing on desktop, and the ability to add, edit, or delete cards with confirmation protection. It also supports custom and responsive layouts, along with entity smart search and auto-completion.

Why Use Hass-Panel?

Hass-Panel stands out as an exceptional choice for Home Assistant users due to its unparalleled simplicity and robust feature set. It eliminates the need for any programming experience, allowing anyone to deploy a sophisticated smart home dashboard with ease. The responsive design ensures a consistent and optimized experience across all devices, from mobile phones to desktop computers. Its highly configurable drag-and-drop interface empowers users to create a truly personalized layout. With comprehensive support for various devices, powerful camera integration, and a beautiful, modern user interface, Hass-Panel transforms your Home Assistant experience into an intuitive and visually appealing one.

Hass-Panel: The Simplest React-Based Control Panel for Home Assistant

Summary

Repository Info