diff --git a/src/components/BeforeAfter/BeforeAfter.mdx b/src/components/BeforeAfter/BeforeAfter.mdx
new file mode 100644
index 00000000..dfb459f8
--- /dev/null
+++ b/src/components/BeforeAfter/BeforeAfter.mdx
@@ -0,0 +1,103 @@
+import { Meta, Canvas } from '@storybook/blocks';
+
+import * as BeforeAfterStories from './BeforeAfter.stories.svelte';
+
+
+
+# BeforeAfter
+
+The `BeforeAfter` component shows a before-and-after comparison of an image.
+
+```svelte
+
+
+
+```
+
+
+
+## Using with overlays
+
+Add overlays with the `beforeOverlay` and `afterOverlay` slots and a caption to the `caption` slot, then style these elements to match your page design as below.
+
+```svelte
+
+
+
July 7, 2020
+
Initially, this site was far smaller.
+
+
+
Oct. 20, 2020
+
But then forces built up.
+
+
Photos by MAXAR Technologies, 2021.
+
+
+
+```
+
+
+
+## Adding ARIA descriptions
+
+Use text elements in your overlays as [ARIA descriptions](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-describedby) for your images by setting an ID on text elements within each overlay with the `description` [slot prop](https://svelte.dev/tutorial/slot-props).
+
+> **💡 TIP:** You must always use the `beforeAlt` / `afterAlt` props to label your image for visually impaired readers, but you can use these descriptions to provide more information or context that the reader might also need.
+
+```svelte
+
+