diff --git a/website/package-lock.json b/website/package-lock.json
index 9f75ef622..91031233d 100644
--- a/website/package-lock.json
+++ b/website/package-lock.json
@@ -3248,6 +3248,28 @@
"resolved": "https://registry.npmjs.org/@hashicorp/react-alert/-/react-alert-2.0.0.tgz",
"integrity": "sha512-9CvkSJ2Onvy+1sXg0n0E3V4X0tl4u9wmp10ISQ4Wh55tstVeBBj/WhqBg8+MZlm9Ib9K903J2A3aDSWBo6k44w=="
},
+ "@hashicorp/react-alert-banner": {
+ "version": "3.0.11",
+ "resolved": "https://registry.npmjs.org/@hashicorp/react-alert-banner/-/react-alert-banner-3.0.11.tgz",
+ "integrity": "sha512-a81+GmqszYdgnKizChl/iaBcZl0JqvhnIszkicmRll9Tgp6aiQLpVQuiGS8HR/TIIvT2u7jA5FnKEQrTiAf8HQ==",
+ "requires": {
+ "@hashicorp/react-global-styles": "^4.0.10",
+ "js-cookie": "2.2.0",
+ "slugify": "1.3.4"
+ },
+ "dependencies": {
+ "js-cookie": {
+ "version": "2.2.0",
+ "resolved": "https://registry.npmjs.org/js-cookie/-/js-cookie-2.2.0.tgz",
+ "integrity": "sha1-Gywnmm7s44ChIWi5JIUmWzWx7/s="
+ },
+ "slugify": {
+ "version": "1.3.4",
+ "resolved": "https://registry.npmjs.org/slugify/-/slugify-1.3.4.tgz",
+ "integrity": "sha512-KP0ZYk5hJNBS8/eIjGkFDCzGQIoZ1mnfQRYS5WM3273z+fxGWXeN0fkwf2ebEweydv9tioZIHGZKoF21U07/nw=="
+ }
+ }
+ },
"@hashicorp/react-button": {
"version": "2.1.6",
"resolved": "https://registry.npmjs.org/@hashicorp/react-button/-/react-button-2.1.6.tgz",
diff --git a/website/package.json b/website/package.json
index 8fc07d7f5..879c1040d 100644
--- a/website/package.json
+++ b/website/package.json
@@ -8,6 +8,7 @@
"@bugsnag/plugin-react": "^6.5.0",
"@hashicorp/nextjs-scripts": "^6.0.0-2",
"@hashicorp/react-alert": "^2.0.0",
+ "@hashicorp/react-alert-banner": "^3.0.11",
"@hashicorp/react-button": "^2.1.6",
"@hashicorp/react-call-to-action": "^0.1.3",
"@hashicorp/react-case-study-slider": "^2.0.10",
diff --git a/website/pages/_app.js b/website/pages/_app.js
index bc4e251b0..dc1d00714 100644
--- a/website/pages/_app.js
+++ b/website/pages/_app.js
@@ -5,6 +5,7 @@ import Router from 'next/router'
import ProductSubnav from '../components/subnav'
import MegaNav from '@hashicorp/react-mega-nav'
import Footer from '@hashicorp/react-footer'
+import AlertBanner from '@hashicorp/react-alert-banner'
import { ConsentManager, open } from '@hashicorp/react-consent-manager'
import consentManagerConfig from '../lib/consent-manager-config'
import bugsnagClient from '../lib/bugsnag'
@@ -71,6 +72,13 @@ class NextApp extends App {
{ href: '/fonts/dejavu/mono.woff2', as: 'font' },
]}
/>
+
diff --git a/website/pages/style.css b/website/pages/style.css
index 61abbfbc0..b99b06177 100644
--- a/website/pages/style.css
+++ b/website/pages/style.css
@@ -5,6 +5,7 @@
@import '~@hashicorp/react-global-styles/custom-properties/font.css';
@import '~@hashicorp/react-global-styles/_temporary-to-remove/layout.css';
@import '~@hashicorp/react-global-styles/_temporary-to-remove/tables.css';
+@import '~@hashicorp/react-alert-banner/dist/style.css';
:root {
--highlight-color: var(--nomad);