diff --git a/docs/.vitepress/components/VersionBanner.vue b/docs/.vitepress/components/VersionBanner.vue
new file mode 100644
index 000000000..5e518915f
--- /dev/null
+++ b/docs/.vitepress/components/VersionBanner.vue
@@ -0,0 +1,44 @@
+<template>
+    <v-snackbar v-model="open" timeout="-1" max-width="none">
+        <span style="padding-right: 2em">
+            🎉 A new version has been released since you last visited this page: <strong>{{ latestVersion }}</strong>
+        </span>
+
+        <template v-slot:actions>
+            <v-btn size="small" variant="elevated" color="primary" @click="changelog()">Changelog</v-btn>
+            <v-btn size="small" variant="text" icon="mdi-close-circle" aria-label="Close" @click="close()"></v-btn>
+        </template>
+    </v-snackbar>
+</template>
+
+<script setup lang="ts">
+import { useRouter } from 'vitepress';
+import { onMounted, ref } from 'vue';
+
+const router = useRouter();
+const latestVersion = ref(null);
+const open = ref(false);
+
+onMounted(async () => {
+    const response = await fetch('https://registry.npmjs.org/@photo-sphere-viewer%2Fcore');
+    if (response.ok) {
+        const data = await response.json();
+        latestVersion.value = data['dist-tags']['latest'];
+        if (!localStorage.version && localStorage.announcementsCache) {
+            localStorage.version = latestVersion.value;
+        } else if (latestVersion.value !== localStorage.version) {
+            open.value = true;
+        }
+    }
+});
+
+function changelog() {
+    close();
+    router.go('/guide/changelog');
+}
+
+function close() {
+    localStorage.version = latestVersion.value;
+    open.value = false;
+}
+</script>
diff --git a/docs/.vitepress/theme/index.ts b/docs/.vitepress/theme/index.ts
index 28c8da83a..5779115b3 100644
--- a/docs/.vitepress/theme/index.ts
+++ b/docs/.vitepress/theme/index.ts
@@ -21,6 +21,7 @@ import {
     VRow,
     VSelect,
     VSlider,
+    VSnackbar,
     VTab,
     VTabs,
     VTabsWindow,
@@ -39,6 +40,7 @@ import ApiButton from '../components/ApiButton.vue';
 import Badges from '../components/Badges.vue';
 import HomeBackground from '../components/HomeBackground.vue';
 import ThemeProvider from '../components/ThemeProvider.vue';
+import VersionBanner from '../components/VersionBanner.vue';
 import codeDemo from '../plugins/code-demo/enhanceApp';
 import dialog from '../plugins/dialog/enhanceApp';
 import gallery from '../plugins/gallery/enhanceApp';
@@ -64,10 +66,11 @@ const vuetify = createVuetify({
         VIcon,
         VMenu,
         VNumberInput,
-        VRow,
-        VSlider,
         VRangeSlider,
+        VRow,
         VSelect,
+        VSlider,
+        VSnackbar,
         VTab,
         VTabs,
         VTabsWindow,
@@ -140,6 +143,7 @@ export default {
         return h(ThemeProvider, h(DefaultTheme.Layout, null, {
             'home-hero-before': () => h(HomeBackground),
             'home-features-after': () => h(Announcements),
+            'layout-bottom': () => h(VersionBanner),
         }));
     },
     enhanceApp({ app }) {
diff --git a/docs/package.json b/docs/package.json
index a1225db34..3c5cfa60d 100644
--- a/docs/package.json
+++ b/docs/package.json
@@ -8,7 +8,7 @@
     "lint": "eslint . --fix",
     "serve-doc": "vitepress dev"
   },
-  "dependencies": {
+  "devDependencies": {
     "lodash-es": "^4.17.21",
     "markdown-it-container": "^4.0.0",
     "vitepress": "^1.5.0",