diff --git a/docs/get-started/whats-a-story.md b/docs/get-started/whats-a-story.md
index 71254da543fd..274649bc2237 100644
--- a/docs/get-started/whats-a-story.md
+++ b/docs/get-started/whats-a-story.md
@@ -27,6 +27,7 @@ Let’s start with the `Button` component. A story is a function that describes
     'web-components/button-story.js.mdx',
     'html/button-story.js.mdx',
     'html/button-story.ts.mdx',
+    'preact/button-story.js.mdx',
   ]}
 />
 
diff --git a/docs/snippets/preact/button-story.js.mdx b/docs/snippets/preact/button-story.js.mdx
new file mode 100644
index 000000000000..91de93efa0d4
--- /dev/null
+++ b/docs/snippets/preact/button-story.js.mdx
@@ -0,0 +1,14 @@
+```js
+// Button.stories.js|jsx
+
+/** @jsx h */
+import { h } from 'preact';
+import { Button } from './Button';
+
+export default {
+    title: 'Button',
+    component: Button,
+};
+
+export const Primary = () => <Button primary label='Button' />;
+```
\ No newline at end of file