diff --git a/plugins/axe-plugin/src/stories/AllyBlock.stories.tsx b/plugins/axe-plugin/src/stories/AllyBlock.stories.tsx
index 6e449e98d..2633b5bcc 100644
--- a/plugins/axe-plugin/src/stories/AllyBlock.stories.tsx
+++ b/plugins/axe-plugin/src/stories/AllyBlock.stories.tsx
@@ -1,13 +1,14 @@
-import React, { FC } from 'react';
+import React from 'react';
+import { Document, Example } from '@component-controls/core';
 import { BlockContextProvider, store } from '@component-controls/blocks';
 import { AllyBlock } from '../index';
 
 export default {
   title: 'Plugins/AllyBlock',
   component: AllyBlock,
-};
+} as Document;
 
-export const overview: FC = () => {
+export const overview: Example = () => {
   return (
     <BlockContextProvider
       storyId="blocks-core-story-plain--controls"
diff --git a/plugins/viewport-plugin/src/stories/ViewportBlock.stories.tsx b/plugins/viewport-plugin/src/stories/ViewportBlock.stories.tsx
index 87538efb4..39bdba957 100644
--- a/plugins/viewport-plugin/src/stories/ViewportBlock.stories.tsx
+++ b/plugins/viewport-plugin/src/stories/ViewportBlock.stories.tsx
@@ -1,13 +1,14 @@
-import React, { FC } from 'react';
+import React from 'react';
+import { Document, Example } from '@component-controls/core';
 import { BlockContextProvider, store } from '@component-controls/blocks';
 import { ViewportBlock } from '../index';
 
 export default {
   title: 'Plugins/ViewportBlock',
   component: ViewportBlock,
-};
+} as Document;
 
-export const overview: FC = () => {
+export const overview: Example = () => {
   return (
     <BlockContextProvider
       storyId="blocks-core-story-plain--controls"
@@ -18,7 +19,7 @@ export const overview: FC = () => {
   );
 };
 
-export const sizes: FC = () => {
+export const sizes: Example = () => {
   return (
     <BlockContextProvider
       storyId="blocks-core-story-plain--controls"