diff --git a/.vitepress/theme/styles/_components/snackbar.scss b/.vitepress/theme/styles/_components/snackbar.scss
new file mode 100644
index 0000000..fa13ac9
--- /dev/null
+++ b/.vitepress/theme/styles/_components/snackbar.scss
@@ -0,0 +1,59 @@
+@use "sass:meta";
+@use "../mixin";
+
+// https://m3.material.io/components/snackbar/overview
+
+.snackbar {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  justify-content: space-between;
+
+  position: fixed;
+  bottom: 0px;
+  right: 12px;
+
+  max-width: 840px;
+  min-width: 240px;
+
+  padding-inline: 16px 8px;
+
+  background-color: var(--md-sys-color-inverse-surface);
+
+  border-radius: var(--md-sys-shape-corner-extra-small);
+
+  box-shadow: var(--md-sys-elevation-level3);
+  opacity: 0;
+  transition: var(--md-sys-motion-duration-long4) var(--md-sys-motion-easing-emphasized);
+  z-index: 99;
+
+  #snackbar-supporting {
+    @include mixin.typescale-style("label-large");
+
+    display: inline-block;
+
+    padding-block: 14px;
+
+    color: var(--md-sys-color-inverse-on-surface);
+  }
+
+  #snackbar-icon {
+    min-width: 40px;
+
+    color: var(--md-sys-color-inverse-on-surface);
+  }
+
+  &[visible="true"] {
+    opacity: 1;
+  }
+
+  &[visible="false"] {
+    opacity: 0;
+  }
+
+  @media screen and (max-width: 840px) {
+    left: 12px;
+
+    width: calc(100% - 24px);
+  }
+}