diff --git a/src/panels/lovelace/editor/config-elements/hui-shopping-list-editor.ts b/src/panels/lovelace/editor/config-elements/hui-shopping-list-editor.ts
index 76c6d9c32c..9436789449 100644
--- a/src/panels/lovelace/editor/config-elements/hui-shopping-list-editor.ts
+++ b/src/panels/lovelace/editor/config-elements/hui-shopping-list-editor.ts
@@ -1,9 +1,10 @@
 import "@polymer/paper-input/paper-input";
-import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
+import { html, LitElement, TemplateResult } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import { assert, assign, object, optional, string } from "superstruct";
 import { isComponentLoaded } from "../../../../common/config/is_component_loaded";
 import { fireEvent } from "../../../../common/dom/fire_event";
+import "../../../../components/ha-alert";
 import { HomeAssistant } from "../../../../types";
 import { ShoppingListCardConfig } from "../../cards/types";
 import "../../components/hui-theme-select-editor";
@@ -50,11 +51,11 @@ export class HuiShoppingListEditor
       <div class="card-config">
         ${!isComponentLoaded(this.hass, "shopping_list")
           ? html`
-              <div class="error">
+              <ha-alert .alertType=${"error"}>
                 ${this.hass.localize(
                   "ui.panel.lovelace.editor.card.shopping-list.integration_not_loaded"
                 )}
-              </div>
+              </ha-alert>
             `
           : ""}
         <paper-input
@@ -99,14 +100,6 @@ export class HuiShoppingListEditor
     }
     fireEvent(this, "config-changed", { config: this._config });
   }
-
-  static get styles(): CSSResultGroup {
-    return css`
-      .error {
-        color: var(--error-color);
-      }
-    `;
-  }
 }
 
 declare global {
diff --git a/src/panels/lovelace/editor/hui-element-editor.ts b/src/panels/lovelace/editor/hui-element-editor.ts
index 68e0d1875c..2eadf82336 100644
--- a/src/panels/lovelace/editor/hui-element-editor.ts
+++ b/src/panels/lovelace/editor/hui-element-editor.ts
@@ -8,7 +8,7 @@ import {
   PropertyValues,
   TemplateResult,
 } from "lit";
-import { property, state, query } from "lit/decorators";
+import { property, query, state } from "lit/decorators";
 import { fireEvent } from "../../../common/dom/fire_event";
 import { handleStructError } from "../../../common/structs/handle-errors";
 import { computeRTL } from "../../../common/util/compute_rtl";
@@ -207,40 +207,45 @@ export abstract class HuiElementEditor<T> extends LitElement {
             `}
         ${this._guiSupported === false && this.configElementType
           ? html`
-              <div class="info">
+              <ha-alert>
                 ${this.hass.localize(
                   "ui.errors.config.editor_not_available",
                   "type",
                   this.configElementType
                 )}
-              </div>
+              </ha-alert>
             `
           : ""}
         ${this.hasError
           ? html`
-              <div class="error">
-                ${this.hass.localize("ui.errors.config.error_detected")}:
-                <br />
+              <ha-alert
+                .title=${this.hass.localize("ui.errors.config.error_detected")}
+                .alertType=${"error"}
+              >
                 <ul>
                   ${this._errors!.map((error) => html`<li>${error}</li>`)}
                 </ul>
-              </div>
+              </ha-alert>
             `
           : ""}
         ${this.hasWarning
           ? html`
-              <div class="warning">
-                ${this.hass.localize("ui.errors.config.editor_not_supported")}:
-                <br />
+              <ha-alert
+                .title=${this.hass.localize(
+                  "ui.errors.config.editor_not_supported"
+                )}
+                .alertType=${"warning"}
+              >
                 ${this._warnings!.length > 0 && this._warnings![0] !== undefined
-                  ? html` <ul>
-                      ${this._warnings!.map(
-                        (warning) => html`<li>${warning}</li>`
-                      )}
-                    </ul>`
+                  ? html`
+                      <ul>
+                        ${this._warnings!.map(
+                          (warning) => html`<li>${warning}</li>`
+                        )}
+                      </ul>
+                    `
                   : ""}
-                ${this.hass.localize("ui.errors.config.edit_in_yaml_supported")}
-              </div>
+              </ha-alert>
             `
           : ""}
       </div>