borek007
diff --git a/‎docs/index.html
+12 b/‎docs/index.html
+12
diff --git a/‎docs/styleguide/build/0.7272607c.js
+1 b/‎docs/styleguide/build/0.7272607c.js
+1
diff --git a/‎docs/styleguide/build/bundle.b342c5a9.js
+1 b/‎docs/styleguide/build/bundle.b342c5a9.js
+1
diff --git a/‎docs/styleguide/index.html
+11 b/‎docs/styleguide/index.html
+11
diff --git a/‎playground/docs/components.md
-1 b/‎playground/docs/components.md
-1
diff --git a/‎playground/styleguide.config.js
+19-6 b/‎playground/styleguide.config.js
+19-6
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <meta http-equiv="X-UA-Compatible" content="ie=edge">
+  <title>React & Redux in TypeScript - Static Typing Guide</title>
+</head>
+<body>
+  <a href="/styleguide">Living Style Guide</a>
+</body>
+</html>
@@ -0,0 +1,11 @@
+<!doctype html>
+<html>
+	<head>
+		<meta charset="utf-8">
+		<title>Component Typing Patterns in React + TypeScript</title>
+		<meta name="viewport" content="width=device-width, initial-scale=1.0">
+	</head>
+	<body>
+		<div id="app"></div>
+	<script type="text/javascript" src="build/bundle.b342c5a9.js"></script></body>
+</html>
@@ -6,26 +6,39 @@ const webpackConfig = createConfig([typescript()]);
 webpackConfig.resolve.alias = { '@src': path.join(__dirname, 'src') };
 
 module.exports = {
-  showUsage: true,
-  title: 'React-Redux-Typescript Guide',
+  showUsage: false,
+  styleguideDir: '../docs/styleguide',
+  title: 'Component Typing Patterns in React + TypeScript',
   ignore: ['**/*.usage.tsx'],
   sections: [
     {
       name: 'Introduction',
       content: './docs/intro.md'
     },
     {
-      name: 'Components',
-      content: './docs/components.md',
+      name: 'Stateless Components - SFC',
       components: () => ([
-        './src/components/sfc-spread-attributes.tsx',
         './src/components/sfc-counter.tsx',
+        './src/components/sfc-spread-attributes.tsx',
+      ]),
+    },
+    {
+      name: 'Stateful Components - Class',
+      components: () => ([
         './src/components/stateful-counter.tsx',
         './src/components/stateful-counter-with-initial-count.tsx',
+      ]),
+    },
+    {
+      name: 'Generic Components',
+      components: () => ([
         './src/components/generic-list.tsx'
       ]),
-    }
+    },
   ],
+  theme: {
+    sidebarWidth: 300,
+  },
   propsParser: require('react-docgen-typescript').parse,
   webpackConfig: webpackConfig,
   updateExample: function (props, exampleFilePath) {