diff --git a/docs/public/style.css b/docs/public/style.css
index b54aad583b..f032fcb752 100644
--- a/docs/public/style.css
+++ b/docs/public/style.css
@@ -11,6 +11,13 @@ body {
   opacity: 0;
 }
 
+blockquote {
+  border-left: 3px solid rgba(34, 36, 38, .15);
+  margin-left: 0;
+  padding-left: 10px;
+  font-style: italic;
+}
+
 h1:hover > .anchorjs-link:not(:hover),
 h2:hover > .anchorjs-link:not(:hover),
 h3:hover > .anchorjs-link:not(:hover),
@@ -59,9 +66,11 @@ code:not(.hljs)::after {
   background: #fff;
   box-shadow: 0 1px 2px #ccc;
 }
+
 .docs-example:hover {
   box-shadow: 0 2px 8px #bbb;
 }
+
 .docs-example.active {
   box-shadow: 0 8px 32px #aaa;
 }
@@ -109,6 +118,7 @@ code:not(.hljs)::after {
   font-size: 13px;
   color: #aaa;
 }
+
 .carbon-text:hover {
   color: #ddd;
 }
@@ -120,6 +130,7 @@ code:not(.hljs)::after {
   opacity: 0.5;
   white-space: nowrap;
 }
+
 .carbon-poweredby:hover {
   color: #ddd;
 }
diff --git a/docs/src/components/CodeEditor/CodeEditor.js b/docs/src/components/CodeEditor/CodeEditor.js
index 9822e09a88..83f9ff37c5 100644
--- a/docs/src/components/CodeEditor/CodeEditor.js
+++ b/docs/src/components/CodeEditor/CodeEditor.js
@@ -5,6 +5,7 @@ import Ace from 'react-ace'
 import 'brace'
 import 'brace/ext/language_tools'
 import 'brace/mode/jsx'
+import 'brace/mode/json'
 import 'brace/mode/html'
 import 'brace/mode/sh'
 import 'brace/theme/tomorrow_night'
@@ -95,7 +96,7 @@ const semanticUIReactCompleter = {
   },
 }
 
-const CodeEditor = props => (
+const CodeEditor = (props) => (
   <Ace
     {...props}
     name={`docs-editor-${_.uniqueId()}`}
diff --git a/docs/src/components/CodeSnippet/CodeSnippet.js b/docs/src/components/CodeSnippet/CodeSnippet.js
index 0071ff7f0e..fd4cef601f 100644
--- a/docs/src/components/CodeSnippet/CodeSnippet.js
+++ b/docs/src/components/CodeSnippet/CodeSnippet.js
@@ -23,6 +23,13 @@ const labelStyle = {
   zIndex: 100,
 }
 
+const formatters = {
+  html: (val) => formatCode(val, 'html'),
+  json: (val) => val,
+  jsx: (val) => formatCode(val, 'babel').replace(/^;</m, '<'), // will replace ";" from the beginning of line
+  sh: (val) => val.replace(/^/g, '$  '),
+}
+
 const CodeSnippet = ({ fitted, label, mode, value, ...rest }) => (
   <div style={{ ...containerStyle, margin: fitted ? 0 : '1rem 0' }}>
     <div style={labelStyle}>{label || mode}</div>
@@ -34,10 +41,7 @@ const CodeSnippet = ({ fitted, label, mode, value, ...rest }) => (
       readOnly
       showGutter={false}
       showCursor={false}
-      value={(mode === 'sh'
-        ? value.replace(/^/g, '$  ')
-        : formatCode(value, mode === 'html' ? 'html' : 'babel')
-      ).trim()}
+      value={formatters[mode](value).trim()}
       {...rest}
     />
   </div>
@@ -46,7 +50,7 @@ const CodeSnippet = ({ fitted, label, mode, value, ...rest }) => (
 CodeSnippet.propTypes = {
   fitted: PropTypes.bool,
   label: PropTypes.string,
-  mode: PropTypes.oneOf(['html', 'jsx', 'sh']),
+  mode: PropTypes.oneOf(['html', 'json', 'jsx', 'sh']),
   value: PropTypes.string.isRequired,
 }
 
diff --git a/docs/src/components/DocumentationPage/components.js b/docs/src/components/DocumentationPage/components.js
index 57f17d4a9f..e2233a1d05 100644
--- a/docs/src/components/DocumentationPage/components.js
+++ b/docs/src/components/DocumentationPage/components.js
@@ -10,11 +10,14 @@ import CodeSnippet from 'docs/src/components/CodeSnippet'
 
 export const a = ({ children, href }) => <Link to={href}>{children}</Link>
 
-export const code = ({ className, children }) => {
-  const mode = className.replace('language-', '')
-
-  return <CodeSnippet mode={mode} value={children} />
-}
+export const code = ({ className, children, fitted, label }) => (
+  <CodeSnippet
+    fitted={fitted}
+    mode={className.replace('language-', '')}
+    label={label}
+    value={children}
+  />
+)
 
 export const h1 = ({ children }) => <Header as='h1' content={children} textAlign='center' />
 
diff --git a/docs/src/components/Sidebar/Sidebar.js b/docs/src/components/Sidebar/Sidebar.js
index 7f17413f66..d843ff1578 100644
--- a/docs/src/components/Sidebar/Sidebar.js
+++ b/docs/src/components/Sidebar/Sidebar.js
@@ -120,7 +120,7 @@ class Sidebar extends Component {
   menuItemsByType = _.map((nextType) => {
     const items = _.flow(
       _.filter(({ type }) => type === nextType),
-      _.map(info => (
+      _.map((info) => (
         <Menu.Item
           key={info.displayName}
           name={info.displayName}
@@ -220,13 +220,19 @@ class Sidebar extends Component {
                   Introduction
                 </Menu.Item>
                 <Menu.Item as={Link} exact to='/usage' activeClassName='active'>
-                  Usage
+                  Get Started
+                </Menu.Item>
+                <Menu.Item as={Link} exact to='/augmentation' activeClassName='active'>
+                  Augmentation
+                </Menu.Item>
+                <Menu.Item as={Link} exact to='/shorthand-props' activeClassName='active'>
+                  Shorthand Props
                 </Menu.Item>
                 <Menu.Item as={Link} exact to='/theming' activeClassName='active'>
                   Theming
                 </Menu.Item>
                 <Menu.Item as={Link} exact to='/layouts' activeClassName='active'>
-                  Layouts
+                  Layout examples
                 </Menu.Item>
                 <Menu.Item as={Link} exact to='/prototypes' activeClassName='active'>
                   Prototypes
@@ -238,7 +244,7 @@ class Sidebar extends Component {
                 <Input
                   fluid
                   icon={{ name: 'filter', color: 'teal', inverted: true, bordered: true }}
-                  placeholder='Press &quot;/&quot; to filter components'
+                  placeholder='Press "/" to filter components'
                   value={query}
                   onChange={this.handleSearchChange}
                   onKeyDown={this.handleSearchKeyDown}
diff --git a/docs/src/pages/Augmentation.mdx b/docs/src/pages/Augmentation.mdx
new file mode 100644
index 0000000000..eaf9d88f96
--- /dev/null
+++ b/docs/src/pages/Augmentation.mdx
@@ -0,0 +1,35 @@
+import { Header, Message } from 'semantic-ui-react'
+
+export const meta = {
+  title: 'Augmentation',
+}
+
+<Header as='h1' content='Augmentation' textAlign='center' />
+
+React components are inherently composable. Semantic UI React makes them even more so with the `as` prop feature: you can control the rendered HTML tag, or render one component as another component.
+
+```jsx
+<>
+  // will produce <button class='ui button' />
+  <Button />
+  // 🔨 will produce <a class='ui button' />
+  <Button as='a' />
+</>
+```
+
+Augmentation is powerful. You can compose component features and props without adding extra nested components. This is essential for working with `MenuLink`s and `react-router`.
+
+<Message info size='mini'>
+  Unhandled props by a component are passed to the component you are rendering <code>as</code>.
+</Message>
+
+```jsx
+import { Link } from 'react-router-dom'
+
+;<Menu>
+  // 💡 `to` does not belong to `Menu.Item` props and will be passed to `Link`
+  <Menu.Item as={Link} to='/home'>
+    Home
+  </Menu.Item>
+</Menu>
+```
diff --git a/docs/src/pages/Layouts.mdx b/docs/src/pages/Layouts.mdx
index 717f6ccabe..6d9a2d09da 100644
--- a/docs/src/pages/Layouts.mdx
+++ b/docs/src/pages/Layouts.mdx
@@ -2,10 +2,10 @@ import { Link } from 'react-static'
 import { Card, Header } from 'semantic-ui-react'
 
 export const meta = {
-  title: 'Layouts',
+  title: 'Layout examples',
 }
 
-<Header as='h1' content='Layouts' textAlign='center' />
+<Header as='h1' content='Layout examples' textAlign='center' />
 
 <Header as='h2' content='Starter' subheader='Examples to introduce components and their function' />
 
diff --git a/docs/src/pages/ShorthandProps.mdx b/docs/src/pages/ShorthandProps.mdx
new file mode 100644
index 0000000000..ba29ca7a11
--- /dev/null
+++ b/docs/src/pages/ShorthandProps.mdx
@@ -0,0 +1,109 @@
+import { Header, Icon, Message } from 'semantic-ui-react'
+
+export const meta = {
+  title: 'Shorthand Props',
+}
+
+<Header as='h1' content='Shorthand Props' textAlign='center' />
+
+It is quite common for Semantic UI React component to have "shorthands" which accept shorthand values. For example, `Button` component has an `icon` shorthand which value defines the icon that will be rendered.
+
+```jsx
+<Button icon='like' />
+```
+
+There are several forms of shorthand values that can be provided, but all of them share one common thing - each is eventually evaluated to React Element. Thus, you can think of shorthand values as a recipe to customize rendered React Element at corresponding shorthand.
+
+## Object as value
+
+Each component's shorthand has associated default element type. For example, by default there is `<Icon />` element rendered for `Button`'s icon shorthand. It is possible to customize props of this default element by providing props object as shorthand value:
+
+```jsx
+// 💡 'color' and 'name' will be used as <Icon /> element's props
+<Button content='Like' icon={{ color: 'red', name: 'like' }} />
+```
+
+## String as value
+
+There is even shorter way to define default element's props - by using a primitive value. In that case provided shorthand value will be taken as a value for "default prop" of this element.
+
+This could be much easier seen with an example. Here, again, we have a `Button` element with its icon being defined with shorthand - where provided `string` value will be used as icon's `name`:
+
+```jsx
+<>
+  <Button content='Like' icon='like' />
+  // 💡 has identical effect to the previous one
+  <Button content='Like' icon={{ name: 'like' }} />
+</>
+```
+
+This works because name is the default prop of shorthand's `<Icon />` element.
+
+```jsx
+<>
+  <Modal trigger={<Button>Show</Button>} content='Content' />
+  // 💡 has identical effect to the previous one
+  <Modal trigger={<Button>Show</Button>} content={{ content: 'Content' }} />
+  // ⛔ example below has broken styling, see section about React Element
+  <Modal trigger={<Button>Show</Button>} content={<div>Content</div>} />
+</>
+```
+
+## Disable shorthand's rendering
+
+It is also possible to pass falsy values (`false`, `null` or `undefined`) to shorthand prop - in that case there will be nothing rendered for the component's shorthand.
+
+```jsx
+<Dropdown icon={null} />
+```
+
+## React Element as value
+
+There are cases where it might be necessary to customize element tree that will be rendered as a shorthand's value. Returning to `Button` example, we might want to render `<i />` instead of default `<Icon />` element. In that case necessary element might be directly provided as shorthand value:
+
+```jsx
+<Button icon={<i className='my-icon' />} />
+```
+
+<Message icon size='small' warning>
+  <Icon name='warning' />
+  <Message.Content>
+    There is a very important caveat here, though: whenever React Element is directly used as a
+    shorthand value, all props that Semantic UI React has created for the shorthand's Component will
+    be spread on the passed element. This means that provided element should be able to handle props
+    - while this requirement is satisfied for all SUIR components, you should be aware of that when
+    either HTML or any third-party elements are provided.
+  </Message.Content>
+</Message>
+
+Due to this limitation, you should strive to use other options for shorthand values whenever is possible - for instance, this is how previous example can be rewritten:
+
+```jsx
+<Button icon={{ as: 'i', className: 'my-icon' }} />
+```
+
+However, there still might be cases where it would be impossible to use object form of the shorthand value - for example, you might want to render some custom elements tree for the shorthand. In that case function value should be used.
+
+## Function as value
+
+Providing function as a shorthand value is the most involving but, at the same time, the most powerful option for customizing component's shorthand. The only requirements for this function are:
+
+- it should finish syncronously
+- it should return React Element as a result
+
+Thus, in its simplest form, it could be used the following way:
+
+```jsx
+<Button
+  content='Like'
+  icon={(Component, componentProps) => <Component {...componentProps} color='red' name='like' />}
+/>
+```
+
+## Customizing rendered shorthand
+
+There is another use case when render function is very useful for - this is the case where custom element's tree should be rendered for the shorthand. As you might recall, there is a problem that might happen when React Element is provided directly as shorthand value - in that case props are not propagated to rendered. In order to avoid that the following strategy should be considered:
+
+```jsx
+<Button content='Like' icon={(Component, componentProps) => <Label basic>+1</Label>} />
+```
diff --git a/docs/src/pages/Theming.mdx b/docs/src/pages/Theming.mdx
index 3a2bdc23a3..b8b133dcd1 100644
--- a/docs/src/pages/Theming.mdx
+++ b/docs/src/pages/Theming.mdx
@@ -1,4 +1,4 @@
-import { Button, Header } from 'semantic-ui-react'
+import { Button, Header, Message } from 'semantic-ui-react'
 
 export const meta = {
   title: 'Theming',
@@ -7,13 +7,13 @@ export const meta = {
 <Header as='h1' content='Theming' textAlign='center' />
 
 ## Preface
-       
+
 Semantic UI React does not have own styling system and fully relies on the theming of
 Semantic UI. It's really powerful, you don't need to know LESS or CSS you can simply
 update values of variables or use styles from predefined themes.
-       
+  
 In fact, all you know about theming and styling of Semantic UI is fully applicable to Semantic UI React.
-        
+
 <Button
   content='Learn more about theming'
   labelPosition='right'
@@ -30,11 +30,10 @@ In fact, all you know about theming and styling of Semantic UI is fully applicab
 />
 
 ## Quick start
-       
-Semantic UI offers its own build system that uses Gulp and produces prepared CSS files. It makes sense to use it with Create React App as it does not support LESS loader.
-        
-In all other cases we recommend to use the LESS package and tune it into your build system
-with Webpack. The LESS package also does not depend on Gulp and other cruft things.
+
+Semantic UI offers its own build system that uses Gulp and produces prepared CSS files.
+  
+In all cases we recommend to use the LESS package and tune it into your build system with Webpack. The LESS package also does not depend on Gulp and other cruft things.
 However, this package is not friendly for Webpack and requires additional configuration.
 
 <Button
@@ -45,26 +44,144 @@ However, this package is not friendly for Webpack and requires additional config
   target='_blank'
 />
 <Button
-  content='Configuring Webpack'
+  content='Configuring Webpack for theming'
   labelPosition='right'
-  href='https://medium.com/webmonkeys/webpack-2-semantic-ui-theming-a216ddf60daf'
+  href='https://medium.com/@marekurbanowicz/how-to-customize-fomantic-ui-with-less-and-webpack-applicable-to-semantic-ui-too-fbf98a74506c'
   icon='medium'
   target='_blank'
 />
 
-## Boilerplate
+## Theming with Create React App
+
+The key point is that you don't want `eject`, but you want to customize styles 🤔
+
+> This is a one-way operation. Once you `eject`, you can't go back!
 
-The boilerplate we prepared is powered by the latest Webpack and includes the all required
-things for quick start like preconfigured theming and hot module reload.
-        
-The boilerplate is optimized for usage with Semantic UI React and Semantic UI LESS, it
-also contains examples of theming usage and custom components.
-        
 <Button
-  content='Boilerplate'
+  content="Don't eject your Create React App"
   labelPosition='right'
-  href='https://github.com/Semantic-Org/Semantic-UI-React/tree/master/examples/webpack3'
-  icon='github'
+  href='https://medium.com/curated-by-versett/dont-eject-your-create-react-app-b123c5247741'
+  icon='medium'
+  size='small'
   target='_blank'
 />
-     
+
+### Remove existing styles
+
+First of all, please remove existing references for `semantic-ui-css` package or styles included from CDN to avoid styles duplication.
+
+```sh
+yarn remove semantic-ui-css
+```
+
+### Install required dependencies
+
+Create React App does not support LESS out of the box, we and propose to use [`@craco/craco`](https://www.npmjs.com/package/@craco/craco) to add it and avoid `eject`. You have to install required packages, update your `package.json` and create `craco.config.js`.
+
+```sh
+yarn add @craco/craco craco-less cpy-cli semantic-ui-less --dev
+```
+
+```json label=package.json
+{
+  "scripts": {
+    "start": "craco start",
+    "build": "craco build",
+    "test": "craco test",
+    "eject": "craco eject"
+  }
+}
+```
+
+```jsx label=craco.config.js
+const { getLoader, loaderByName, throwUnexpectedConfigError } = require('@craco/craco')
+
+module.exports = {
+  webpack: {
+    alias: {
+      '../../theme.config$': require('path').join(__dirname, '/src/semantic-ui/theme.config'),
+    },
+  },
+  plugins: [
+    { plugin: require('craco-less') },
+    {
+      plugin: {
+        overrideWebpackConfig: ({ context, webpackConfig }) => {
+          const { isFound, match: fileLoaderMatch } = getLoader(
+            webpackConfig,
+            loaderByName('file-loader'),
+          )
+
+          if (!isFound) {
+            throwUnexpectedConfigError({
+              message: `Can't find file-loader in the ${context.env} webpack config!`,
+            })
+          }
+
+          fileLoaderMatch.loader.exclude.push(/theme.config$/)
+          fileLoaderMatch.loader.exclude.push(/\.variables$/)
+          fileLoaderMatch.loader.exclude.push(/\.overrides$/)
+
+          return webpackConfig
+        },
+      },
+    },
+  ],
+}
+```
+
+<Message size='mini' warning>
+  Make sure it installed <code>less</code> with version <code>>=3.0.0</code> as sometimes it will
+  install <code>2.*</code> by default which will get you in the troubles.
+</Message>
+
+### Scaffold custom styles
+
+Now we need to copy necessary files with the skeleton of your customization.
+
+```sh
+yarn cpy node_modules/semantic-ui-less/_site/**/* src/semantic-ui/site
+```
+
+```sh
+yarn cpy node_modules/semantic-ui-less/theme.config.example src/semantic-ui --rename=theme.config
+```
+
+### `theme.config`
+
+This file is mostly prepared but you have to change some details in the bottom of it:
+
+```json label=src/semantic-ui/theme.config
+/*******************************
+            Folders
+*******************************/
+
+@themesFolder : 'themes';
+@siteFolder  : '../../src/semantic-ui/site';
+
+@import (multiple) "~semantic-ui-less/theme.less";
+@fontPath : '../../../themes/@{theme}/assets/fonts';
+```
+
+### Last but not least: import main LESS file
+
+You have to import `semantic.less` file in your entry file.
+
+```jsx
+import 'semantic-ui-less/semantic.less'
+```
+
+### It is working now!
+
+```sh
+yarn start
+```
+
+You can now go e.g. to `src/semantic-ui/site/globals/site.variables` and add:
+
+```json
+@primaryColor: #002f4e;
+@pageBackground: #eff0f1;
+```
+
+which will change your primary color and background color of the `<body>` 🚀
diff --git a/docs/src/pages/Usage.mdx b/docs/src/pages/Usage.mdx
index f42ed8d154..8bbd87f55c 100644
--- a/docs/src/pages/Usage.mdx
+++ b/docs/src/pages/Usage.mdx
@@ -5,10 +5,10 @@ import CodeSnippet from 'docs/src/components/CodeSnippet'
 import { semanticUIDocsURL, semanticUIRepoURL, semanticUICSSRepoURL } from 'docs/src/utils'
 
 export const meta = {
-  title: 'Usage',
+  title: 'Get Started',
 }
 
-# Usage
+# Get Started
 
 ## Install
 
@@ -26,6 +26,8 @@ React components can be installed via <code>yarn</code>:
   Themes from Semantic UI >=2.3.x require Semantic UI React >=0.81.0.
 </Message>
 
+If you are using TypeScript, you don't need to install anything, typings are included with the package.
+
 ### Theme
 
 Choose a theme and delivery method that suits your needs:
@@ -89,7 +91,8 @@ Choose a theme and delivery method that suits your needs:
           <CodeSnippet label='index.js' value="import '../semantic/dist/semantic.min.css'" />
           <p>
             Detailed documentation on Semantic UI theming is provided{' '}
-            <a href={`${semanticUIDocsURL}usage/theming.html`}>here</a>.
+            <a href={`${semanticUIDocsURL}usage/theming.html`}>here</a> and in our{' '}
+            <Link to='/theming'>Theming guide</Link>.
           </p>
         </Tab.Pane>
       ),
@@ -107,6 +110,34 @@ example recipes with some of them. You can use these as a starting point for you
 <Tab
   menu={{ attached: 'top', secondary: true, pointing: true, color: 'teal' }}
   panes={[
+    {
+      menuItem: 'Create React App',
+      render: () => (
+        <Tab.Pane style={{ fontSize: 'inherit' }}>
+          <p>
+            Semantic UI React is fully compatible with <code>create-app-react</code> and works out
+            the box. Setup of custom theme is covered in <Link to='/theming'>Theming guide</Link>.
+          </p>
+        </Tab.Pane>
+      ),
+    },
+    {
+      menuItem: 'Webpack 4',
+      render: () => (
+        <Tab.Pane style={{ fontSize: 'inherit' }}>
+          <p>
+            Semantic UI React is fully supported by Webpack 4, including tree shaking as of{' '}
+            <code>semantic-ui-react@0.81.2</code>.
+          </p>
+          <p>
+            Please ensure that you build your app in production mode before release. Semantic UI
+            React includes several optimizations in production mode, such as stripping{' '}
+            <code>propTypes</code>
+            from your build.
+          </p>
+        </Tab.Pane>
+      ),
+    },
     {
       menuItem: 'Webpack 2/3',
       render: () => (
@@ -189,22 +220,6 @@ example recipes with some of them. You can use these as a starting point for you
         </Tab.Pane>
       ),
     },
-    {
-      menuItem: 'Webpack 4',
-      render: () => (
-        <Tab.Pane style={{ fontSize: 'inherit' }}>
-          <p>
-            Semantic UI React is fully supported by Webpack 4, including tree shaking as of{' '}
-            <code>semantic-ui-react@0.81.2</code>.
-          </p>
-          <p>
-            Please ensure that you build your app in production mode before release. Semantic UI
-            React includes several optimizations in production mode, such as stripping `propTypes`
-            from your build.
-          </p>
-        </Tab.Pane>
-      ),
-    },
   ]}
 />