diff --git a/packages/ui/src/components/PreviewAlert/index.module.scss b/packages/ui/src/components/PreviewAlert/index.module.scss
new file mode 100644
index 00000000..89834f65
--- /dev/null
+++ b/packages/ui/src/components/PreviewAlert/index.module.scss
@@ -0,0 +1,8 @@
+.utrecht-preview-mode {
+  --utrecht-space-around: 0;
+  --utrecht-alert-padding-block-start: var(--utrecht-preview-mode-padding-block-start, 10px);
+  --utrecht-alert-padding-block-end: var(--utrecht-preview-mode-padding-block-end, 10px);
+
+  inline-size: 100%;
+  text-align: center;
+}
diff --git a/packages/ui/src/components/PreviewAlert/index.tsx b/packages/ui/src/components/PreviewAlert/index.tsx
new file mode 100644
index 00000000..0e335ed4
--- /dev/null
+++ b/packages/ui/src/components/PreviewAlert/index.tsx
@@ -0,0 +1,23 @@
+import { Alert, Link, Paragraph } from '@utrecht/component-library-react';
+import classnames from 'classnames/bind';
+import styles from './index.module.scss';
+
+const css = classnames.bind(styles);
+
+type LinkTypes = {
+  href: string;
+  text: string;
+};
+
+export interface PreviewAlertProps {
+  link: LinkTypes;
+  message: string;
+}
+
+export const PreviewAlert = ({ link, message }: PreviewAlertProps) => (
+  <Alert type="warning" className={css('utrecht-preview-mode')}>
+    <Paragraph>
+      {message} <Link href={link.href}>{link.text}</Link>
+    </Paragraph>
+  </Alert>
+);
diff --git a/packages/ui/src/components/index.tsx b/packages/ui/src/components/index.tsx
index c9985729..76802ee8 100644
--- a/packages/ui/src/components/index.tsx
+++ b/packages/ui/src/components/index.tsx
@@ -6,4 +6,6 @@ export * from './LogoButton';
 export * from './Markdown';
 export * from './MultiColumnsLogoButton';
 export * from './Navigation';
+export { PreviewAlert } from './PreviewAlert';
+export type { PreviewAlertProps } from './PreviewAlert';
 export * from './PriceWidget';