diff --git a/core/loader/src/replaceSource.ts b/core/loader/src/replaceSource.ts
index 6ba4e0c17..63b1fb5fe 100644
--- a/core/loader/src/replaceSource.ts
+++ b/core/loader/src/replaceSource.ts
@@ -19,6 +19,15 @@ ${stories
 `;
   const storeConst = `const store = ${hashKey};\n`;
   let loadStories = `
+  const assignProps = (obj, props) => {
+    //preserve component and subcomponents as strings
+    const componentName = obj.component;
+    const subcomponentsName = obj.subcomponents;
+    Object.assign(obj, props);
+    obj.component = componentName;
+    obj.subcomponents = subcomponentsName;
+
+  }
   for (let i = 0; i < store.stores.length; i+= 1) {
     const s =  store.stores[i];
     const doc = s.doc;
@@ -29,13 +38,13 @@ ${stories
           const exported = exports[key];
           if (key === 'default') {
             const { storySource, ...rest } = exported;
-            Object.assign(doc, rest);
+            assignProps(doc, rest);
           } else {
             const story = s.stories[key];
             if (story) {
               story.renderFn = exported;
               if (exported.story) {
-                Object.assign(story, exported.story);
+                assignProps(story, exported.story);
               }
             }
           }
diff --git a/core/store/src/serialization/load-store.ts b/core/store/src/serialization/load-store.ts
index 790c5743a..e1e9cdd56 100644
--- a/core/store/src/serialization/load-store.ts
+++ b/core/store/src/serialization/load-store.ts
@@ -42,23 +42,23 @@ export const loadStoryStore = (
           const storeStories = s.stories;
           if (storeDoc && storeStories && s.stories) {
             const doc = storeDoc;
+            const {
+              title,
+              stories,
+              source,
+              component,
+              fileName,
+              repository,
+              components,
+              excludeStories,
+              includeStories,
+              package: docPackage,
+              ...otherDocProps
+            } = doc;
             globalStore.docs[doc.title] = doc;
             Object.keys(storeStories).forEach((storyName: string) => {
               const story: Story = storeStories[storyName];
-              const {
-                title,
-                stories,
-                source,
-                component,
-                fileName,
-                repository,
-                components,
-                excludeStories,
-                includeStories,
-                package: docPackage,
-                ...rest
-              } = doc;
-              Object.assign(story, deepMerge(rest, story));
+              Object.assign(story, deepMerge(otherDocProps, story));
               const smartControls = addSmartControls(
                 story,
                 doc,
diff --git a/examples/stories/src/stories/home-page.stories.mdx b/examples/stories/src/stories/home-page.stories.mdx
index 224e0b882..03d59cd98 100644
--- a/examples/stories/src/stories/home-page.stories.mdx
+++ b/examples/stories/src/stories/home-page.stories.mdx
@@ -6,6 +6,7 @@ menu: false
 ---
 
 import { jsx, Flex, Heading, Text, Button } from 'theme-ui';
+import { SyntaxHighlighter } from '@component-controls/components';
 import { DocsLink, StoryLink, DocLink } from '@component-controls/app';
 
 <Flex sx={{ minHeight: '300px', width: '100%', alignItems: 'center', backgroundColor: 'primary', color: 'white' }}>
@@ -18,8 +19,11 @@ import { DocsLink, StoryLink, DocLink } from '@component-controls/app';
   </Flex>  
 </Flex>
 
-<StoryLink id='introduction-controls--random-number'>Go to Random Number story</StoryLink>
 
+<SyntaxHighlighter dark={true} language="bash">
+yarn add gatsby-theme-stories
+</SyntaxHighlighter>
+<br/>
+<StoryLink sx={{ my: 2 }} id='introduction-controls--random-number'>Go to Random Number story</StoryLink>
 <br/>
-
 <DocLink id='Introduction/MDX'>Go to MDX doc page</DocLink>
\ No newline at end of file
diff --git a/ui/blocks/src/context/components/ComponentsContext.tsx b/ui/blocks/src/context/components/ComponentsContext.tsx
index b79df988b..8f66b7ba5 100644
--- a/ui/blocks/src/context/components/ComponentsContext.tsx
+++ b/ui/blocks/src/context/components/ComponentsContext.tsx
@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from 'react';
+import { useEffect, useState, useContext } from 'react';
 import {
   Story,
   StoriesDoc,
@@ -36,10 +36,12 @@ export const useComponentsContext = ({
     getComponents,
     addObserver,
     removeObserver,
-  } = React.useContext(BlockDataContext);
+  } = useContext(BlockDataContext);
+
   const [{ story, doc, component, componentPackage }, setStoryData] = useState(
     getStoryData(storyId, docId),
   );
+
   useEffect(() => {
     setStoryData(getStoryData(storyId, docId));
     const onChange = () => {
diff --git a/ui/components/src/ActionBar/ActionBar.tsx b/ui/components/src/ActionBar/ActionBar.tsx
index e989bb74c..2dd3b07f4 100644
--- a/ui/components/src/ActionBar/ActionBar.tsx
+++ b/ui/components/src/ActionBar/ActionBar.tsx
@@ -1,5 +1,5 @@
 /** @jsx jsx */
-import { FunctionComponent } from 'react';
+import { FC } from 'react';
 import { transparentize } from 'polished';
 import { Theme, Box, Flex, Button, jsx, useThemeUI } from 'theme-ui';
 import { getSortedActions, ActionItems } from './utils';
@@ -44,9 +44,7 @@ const ActionColors = ({
  * actions can accept an order prop, and can also be superimposed
  *
  */
-export const ActionBar: FunctionComponent<ActionBarProps> = ({
-  actions = [],
-}) => {
+export const ActionBar: FC<ActionBarProps> = ({ actions = [] }) => {
   const { theme } = useThemeUI();
   const sortedItems = getSortedActions(actions);
   const items = sortedItems.map(