diff --git a/src/components/Spinner/Spinner.mdx b/src/components/Spinner/Spinner.mdx
new file mode 100644
index 00000000..fc15c31a
--- /dev/null
+++ b/src/components/Spinner/Spinner.mdx
@@ -0,0 +1,25 @@
+import { Meta, Canvas } from '@storybook/blocks';
+
+import * as SpinnerStories from './Spinner.stories.svelte';
+
+<Meta of={SpinnerStories} />
+
+# Spinner
+
+The `Spinner` component creates a simple loading spinner. Use it to hide long loading times for components that may be loading expensive media files or crunching through lots of data.
+
+```svelte
+<script>
+  import { Spinner } from '@reuters-graphics/graphics-components';
+
+  let somethingsLoading = true;
+</script>
+
+{#if somethingsLoading}
+  <Spinner />
+{:else}
+  <p>The real deal is here.</p>
+{/if}
+```
+
+<Canvas of={SpinnerStories.Demo} />
diff --git a/src/components/Spinner/Spinner.stories.svelte b/src/components/Spinner/Spinner.stories.svelte
index f92b2a5f..f29e0b82 100644
--- a/src/components/Spinner/Spinner.stories.svelte
+++ b/src/components/Spinner/Spinner.stories.svelte
@@ -1,15 +1,10 @@
 <script module lang="ts">
-  // @ts-ignore raw
-  import componentDocs from './stories/docs/component.md?raw';
-
+  import { defineMeta } from '@storybook/addon-svelte-csf';
   import Spinner from './Spinner.svelte';
 
-  import { withComponentDocs } from '$lib/docs/utils/withParams.js';
-
-  export const meta = {
+  const { Story } = defineMeta({
     title: 'Components/Utilities/Spinner',
     component: Spinner,
-    ...withComponentDocs(componentDocs),
     argTypes: {
       colour: { control: 'color' },
       ringWidth: { control: { type: 'range', min: 2, max: 20, step: 1 } },
@@ -19,17 +14,7 @@
         control: { type: 'range', min: 5, max: 100, step: 5 },
       },
     },
-  };
+  });
 </script>
 
-<script>
-  import { Template, Story } from '@storybook/addon-svelte-csf';
-</script>
-
-<Template>
-  {#snippet children({ args })}
-    <Spinner {...args} />
-  {/snippet}
-</Template>
-
-<Story name="Default" />
+<Story name="Demo" />
diff --git a/src/components/Spinner/stories/docs/component.md b/src/components/Spinner/stories/docs/component.md
deleted file mode 100644
index fb04d7c7..00000000
--- a/src/components/Spinner/stories/docs/component.md
+++ /dev/null
@@ -1,15 +0,0 @@
-Simple loading spinner. Use it to help hide long loading times for components that may be loading expensive media files or crunching through lots of data.
-
-```svelte
-<script>
-  import { Spinner } from '@reuters-graphics/graphics-components';
-
-  let somethingsLoading = true;
-</script>
-
-{#if somethingsLoading}
-  <Spinner />
-{:else}
-  <p>The real deal is here.</p>
-{/if}
-```