diff --git a/libs/components/src/stories/responsive-design.mdx b/libs/components/src/stories/responsive-design.mdx
new file mode 100644
index 00000000000..a54baf6a231
--- /dev/null
+++ b/libs/components/src/stories/responsive-design.mdx
@@ -0,0 +1,31 @@
+import { Meta } from "@storybook/addon-docs";
+
+<Meta title="Documentation/Responsive Design" />
+
+# Responsive Design
+
+Bitwarden supports the following breakpoints:
+
+| Breakpoint prefix | Minimum width |
+| ----------------- | ------------- |
+| `sm`              | 640px         |
+| `md`              | 768px         |
+| `lg`              | 1024px        |
+| `xl`              | 1280px        |
+| `2xl`             | 1536px        |
+
+These can be used to conditionally apply other Tailwind classes at specific screen sizes. Find more
+info in the [Tailwind docs](https://tailwindcss.com/docs/responsive-design).
+
+## Example
+
+```html
+<!-- Width of 16 by default, 32 on medium screens, and 48 on large screens -->
+<img class="tw-w-16 md:tw-w-32 lg:tw-w-48" src="..." />
+```
+
+<img
+  class="tw-w-16 md:tw-w-32 lg:tw-w-48"
+  alt="Bitwarden logo"
+  src="https://upload.wikimedia.org/wikipedia/commons/thumb/c/cc/Bitwarden_logo.svg/512px-Bitwarden_logo.svg.png"
+/>