diff --git a/packages/styleguide/src/components/ComponentDocs/utils.js b/packages/styleguide/src/components/ComponentDocs/utils.js
index 696464121b5..ab29bd4679d 100644
--- a/packages/styleguide/src/components/ComponentDocs/utils.js
+++ b/packages/styleguide/src/components/ComponentDocs/utils.js
@@ -61,6 +61,20 @@ function printEnums(values) {
   `;
 }
 
+function printShape(values) {
+  const keyValues = Object.keys(values)
+    .map(name => name + ': ' + getType(values[name]))
+    .join(', \r\n');
+
+  return codeBlock`
+    \`\`\`js
+    { 
+      ${keyValues.replace(/```js\n/g, '').replace(/\s+}\n```/g, '\n}')}
+    }
+    \`\`\`
+  `;
+}
+
 /* eslint-disable no-use-before-define */
 function printTypeOf(value, of) {
   return codeBlock`
@@ -81,6 +95,8 @@ function printType(type) {
   switch (type.name) {
     case 'enum':
       return printEnums(type.value);
+    case 'shape':
+      return printShape(type.value);
     case 'instanceOf':
       return printTypeOf(type.value, 'instance');
     case 'arrayOf':
@@ -103,24 +119,6 @@ function getType(type) {
   }
 }
 
-function getShapePropsData(name, props = {}) {
-  return Object.keys(props).reduce(
-    (acc, prop) => ({
-      ...acc,
-      [`${name}.${prop}`]: {
-        type: {
-          name: props[prop].name,
-          value: props[prop].value
-        },
-        defaultValue: props[prop].defaultValue,
-        description: props[prop].description,
-        required: props[prop].required
-      }
-    }),
-    {}
-  );
-}
-
 function getPropsData(props = {}) {
   return Object.keys(props).reduce(
     (allProps, prop) => [
@@ -130,10 +128,7 @@ function getPropsData(props = {}) {
         type: getType(props[prop].type),
         default: props[prop].defaultValue && props[prop].defaultValue.value,
         description: props[prop].description
-      },
-      ...(props[prop].type.name === 'shape'
-        ? getPropsData(getShapePropsData(prop, props[prop].type.value))
-        : [])
+      }
     ],
     []
   );