diff --git a/core/static/bundled/alpine-index.js b/core/static/bundled/alpine-index.js
index 211600a5..62d00178 100644
--- a/core/static/bundled/alpine-index.js
+++ b/core/static/bundled/alpine-index.js
@@ -1,7 +1,9 @@
+import { alpinePlugin } from "#core:utils/notifications";
 import sort from "@alpinejs/sort";
 import Alpine from "alpinejs";
 
 Alpine.plugin(sort);
+Alpine.magic("notifications", alpinePlugin);
 window.Alpine = Alpine;
 
 window.addEventListener("DOMContentLoaded", () => {
diff --git a/core/static/bundled/utils/notifications.ts b/core/static/bundled/utils/notifications.ts
index 70e5fd91..8af936e3 100644
--- a/core/static/bundled/utils/notifications.ts
+++ b/core/static/bundled/utils/notifications.ts
@@ -23,3 +23,14 @@ export function deleteNotifications() {
   }
   return element.dispatchEvent(new CustomEvent("quick-notification-delete"));
 }
+
+export function alpinePlugin() {
+  return {
+    error: (message: string) => createNotification(message, NotificationLevel.Error),
+    warning: (message: string) =>
+      createNotification(message, NotificationLevel.Warning),
+    success: (message: string) =>
+      createNotification(message, NotificationLevel.Success),
+    clear: () => deleteNotifications(),
+  };
+}