diff --git a/apps/nextjs/src/components/utils.tsx b/apps/nextjs/src/components/utils.tsx
new file mode 100644
index 000000000..1262ec877
--- /dev/null
+++ b/apps/nextjs/src/components/utils.tsx
@@ -0,0 +1,33 @@
+import type { AlertProps } from "@mantine/core";
+import { Alert } from "@mantine/core";
+import { IconAlertTriangle } from "@tabler/icons-react";
+
+interface ErrorDisplayProps extends AlertProps {
+  title?: string;
+  hidden?: boolean;
+  message?: string;
+  icon?: React.ReactNode;
+}
+
+export function ErrorDisplay({
+  title = "There was an error",
+  message,
+  icon,
+  hidden = false,
+  ...alertProps
+}: ErrorDisplayProps) {
+  if (hidden) {
+    return null;
+  }
+  return (
+    <Alert
+      variant="filled"
+      color="red"
+      title={title}
+      icon={icon ? icon : <IconAlertTriangle />}
+      {...alertProps}
+    >
+      {message}
+    </Alert>
+  );
+}