diff --git a/frontend/src/components/AlertBanner.tsx b/frontend/src/components/AlertBanner.tsx
new file mode 100644
index 0000000..14af0d7
--- /dev/null
+++ b/frontend/src/components/AlertBanner.tsx
@@ -0,0 +1,30 @@
+import type { ReactNode } from 'react';
+import { AlertCircle, AlertTriangle, CheckCircle, Info } from 'lucide-react';
+
+type AlertVariant = 'error' | 'warn' | 'success' | 'info';
+
+interface AlertBannerProps {
+  variant: AlertVariant;
+  title?: string;
+  children: ReactNode;
+}
+
+const CONFIG: Record<AlertVariant, { cls: string; Icon: typeof AlertCircle; role: string }> = {
+  error:   { cls: 'alert-error',   Icon: AlertCircle,   role: 'alert'  },
+  warn:    { cls: 'alert-warn',    Icon: AlertTriangle, role: 'alert'  },
+  success: { cls: 'alert-success', Icon: CheckCircle,   role: 'status' },
+  info:    { cls: 'alert-info',    Icon: Info,          role: 'status' },
+};
+
+export function AlertBanner({ variant, title, children }: AlertBannerProps): JSX.Element {
+  const { cls, Icon, role } = CONFIG[variant];
+  return (
+    <div role={role} className={cls}>
+      <Icon size={16} aria-hidden className="mt-[2px] shrink-0" />
+      <div className="flex flex-col gap-xxs text-[14px]">
+        {title ? <span className="font-medium text-ink">{title}</span> : null}
+        <span className="text-charcoal">{children}</span>
+      </div>
+    </div>
+  );
+}