diff --git a/docs/app/Components/ComponentDoc/ComponentExample/ComponentExample.js b/docs/app/Components/ComponentDoc/ComponentExample/ComponentExample.js
index a2529856b7..4a08eaf465 100644
--- a/docs/app/Components/ComponentDoc/ComponentExample/ComponentExample.js
+++ b/docs/app/Components/ComponentDoc/ComponentExample/ComponentExample.js
@@ -8,21 +8,15 @@ import { html } from 'js-beautify'
 import copyToClipboard from 'copy-to-clipboard'
 
 import { exampleContext, repoURL, scrollToAnchor } from 'docs/app/utils'
-import { Divider, Grid, Header, Menu } from 'src'
+import { Divider, Grid, Menu } from 'src'
 import Editor from 'docs/app/Components/Editor/Editor'
 import ComponentControls from '../ComponentControls'
+import ComponentExampleTitle from './ComponentExampleTitle'
 
 const babelConfig = {
   presets: ['es2015', 'react', 'stage-1'],
 }
 
-const titleStyle = {
-  margin: 0,
-}
-const descriptionStyle = {
-  maxWidth: '50rem',
-}
-
 const headerColumnStyle = {
   // provide room for absolutely positions toggle code icons
   minHeight: '4em',
@@ -53,6 +47,7 @@ class ComponentExample extends Component {
     history: PropTypes.object.isRequired,
     location: PropTypes.object.isRequired,
     match: PropTypes.object.isRequired,
+    suiVersion: PropTypes.string,
     title: PropTypes.node,
   }
 
@@ -374,7 +369,7 @@ class ComponentExample extends Component {
   }
 
   render() {
-    const { children, description, title } = this.props
+    const { children, description, suiVersion, title } = this.props
     const { controlsVisible, exampleElement, showCode, showHTML } = this.state
     const exampleStyle = {}
 
@@ -392,8 +387,11 @@ class ComponentExample extends Component {
       >
         <Grid.Row columns={2}>
           <Grid.Column style={headerColumnStyle}>
-            {title && <Header as='h3' className='no-anchor' style={titleStyle} content={title} />}
-            {description && <p style={descriptionStyle}>{description}</p>}
+            <ComponentExampleTitle
+              description={description}
+              title={title}
+              suiVersion={suiVersion}
+            />
           </Grid.Column>
           <Grid.Column textAlign='right'>
             <ComponentControls
diff --git a/docs/app/Components/ComponentDoc/ComponentExample/ComponentExampleTitle.js b/docs/app/Components/ComponentDoc/ComponentExample/ComponentExampleTitle.js
new file mode 100644
index 0000000000..151c7a7ae6
--- /dev/null
+++ b/docs/app/Components/ComponentDoc/ComponentExample/ComponentExampleTitle.js
@@ -0,0 +1,40 @@
+import PropTypes from 'prop-types'
+import React from 'react'
+import { Header, Label } from 'semantic-ui-react'
+
+import { pure } from 'docs/app/HOC'
+
+const titleStyle = {
+  margin: 0,
+}
+const descriptionStyle = {
+  maxWidth: '50rem',
+}
+
+const ComponentExampleTitle = ({ description, title, suiVersion }) => (
+  <div>
+    {title && (
+      <Header as='h3' className='no-anchor' style={titleStyle}>
+        {title}
+        {suiVersion && (
+          <Label
+            as='a'
+            color='teal'
+            content={suiVersion}
+            size='tiny'
+            title={`Available from Semantic UI ${suiVersion}`}
+          />
+        )}
+      </Header>
+    )}
+    {description && <p style={descriptionStyle}>{description}</p>}
+  </div>
+)
+
+ComponentExampleTitle.propTypes = {
+  description: PropTypes.node,
+  title: PropTypes.node,
+  suiVersion: PropTypes.string,
+}
+
+export default pure(ComponentExampleTitle)
diff --git a/docs/app/Components/ComponentDoc/ShorthandExample.js b/docs/app/Components/ComponentDoc/ShorthandExample.js
new file mode 100644
index 0000000000..1b67f9921a
--- /dev/null
+++ b/docs/app/Components/ComponentDoc/ShorthandExample.js
@@ -0,0 +1,16 @@
+import PropTypes from 'prop-types'
+import React from 'react'
+
+import ComponentExample from './ComponentExample'
+
+const ShorthandExample = ({ description, ...rest }) => <ComponentExample {...rest} description={description} />
+
+ShorthandExample.propTypes = {
+  description: PropTypes.node,
+}
+
+ShorthandExample.defaultProps = {
+  description: 'You can do the same using shorthands.',
+}
+
+export default ShorthandExample
diff --git a/docs/app/Examples/collections/Menu/Types/index.js b/docs/app/Examples/collections/Menu/Types/index.js
index 1ea5b94f87..ca12fe5cf6 100644
--- a/docs/app/Examples/collections/Menu/Types/index.js
+++ b/docs/app/Examples/collections/Menu/Types/index.js
@@ -2,6 +2,7 @@ import React from 'react'
 
 import ExampleSection from 'docs/app/Components/ComponentDoc/ExampleSection'
 import ComponentExample from 'docs/app/Components/ComponentDoc/ComponentExample'
+import ShorthandExample from 'docs/app/Components/ComponentDoc/ShorthandExample'
 
 // TODO: Add example with <Popup> after it will be added
 
@@ -12,10 +13,7 @@ const Types = () => (
       description='A menu.'
       examplePath='collections/Menu/Types/MenuExampleBasic'
     />
-    <ComponentExample
-      description='Menu can be rendered via shorthand prop.'
-      examplePath='collections/Menu/Types/MenuExampleProps'
-    />
+    <ShorthandExample examplePath='collections/Menu/Types/MenuExampleProps' />
     <ComponentExample
       description='Menu item text can be defined with the content prop.'
       examplePath='collections/Menu/Types/MenuExampleContentProp'
diff --git a/docs/app/Examples/collections/Table/States/index.js b/docs/app/Examples/collections/Table/States/index.js
index 479d05d848..495b12c89c 100644
--- a/docs/app/Examples/collections/Table/States/index.js
+++ b/docs/app/Examples/collections/Table/States/index.js
@@ -2,6 +2,7 @@ import React from 'react'
 
 import ExampleSection from 'docs/app/Components/ComponentDoc/ExampleSection'
 import ComponentExample from 'docs/app/Components/ComponentDoc/ComponentExample'
+import ShorthandExample from 'docs/app/Components/ComponentDoc/ShorthandExample'
 
 const States = () => (
   <ExampleSection title='States'>
@@ -20,11 +21,7 @@ const States = () => (
       description='A cell or row may warn a user.'
       examplePath='collections/Table/States/TableExampleWarning'
     />
-    <ComponentExample
-      title='Warning Shorthand'
-      description='Same as warning example but configured via shorthand.'
-      examplePath='collections/Table/States/TableExampleWarningShorthand'
-    />
+    <ShorthandExample examplePath='collections/Table/States/TableExampleWarningShorthand' />
     <ComponentExample
       title='Active'
       description='A cell or row can be active or selected by a user.'
diff --git a/docs/app/Examples/elements/Button/GroupVariations/index.js b/docs/app/Examples/elements/Button/GroupVariations/index.js
index e800b18a4a..9873e36d3a 100644
--- a/docs/app/Examples/elements/Button/GroupVariations/index.js
+++ b/docs/app/Examples/elements/Button/GroupVariations/index.js
@@ -1,6 +1,8 @@
 import React from 'react'
+
 import ComponentExample from 'docs/app/Components/ComponentDoc/ComponentExample'
 import ExampleSection from 'docs/app/Components/ComponentDoc/ExampleSection'
+import ShorthandExample from 'docs/app/Components/ComponentDoc/ShorthandExample'
 
 const ButtonGroupVariationsExamples = () => (
   <ExampleSection title='Group Variations'>
@@ -19,7 +21,7 @@ const ButtonGroupVariationsExamples = () => (
       description='Groups can be formatted as icons.'
       examplePath='elements/Button/GroupVariations/ButtonExampleGroupIcon'
     />
-    <ComponentExample
+    <ShorthandExample
       description='Using shorthand icons formats each individual button as an icon button.'
       examplePath='elements/Button/GroupVariations/ButtonExampleGroupIconShorthand'
     />
diff --git a/docs/app/Examples/elements/Label/Content/index.js b/docs/app/Examples/elements/Label/Content/index.js
index 2fb6153e51..3d5d78a31d 100644
--- a/docs/app/Examples/elements/Label/Content/index.js
+++ b/docs/app/Examples/elements/Label/Content/index.js
@@ -2,6 +2,7 @@ import React from 'react'
 
 import ComponentExample from 'docs/app/Components/ComponentDoc/ComponentExample'
 import ExampleSection from 'docs/app/Components/ComponentDoc/ExampleSection'
+import ShorthandExample from 'docs/app/Components/ComponentDoc/ShorthandExample'
 
 const LabelContent = () => (
   <ExampleSection title='Content'>
@@ -16,20 +17,14 @@ const LabelContent = () => (
       description='A label can include an icon'
       examplePath='elements/Label/Content/LabelExampleIcon'
     />
-    <ComponentExample
-      description='You can also configure an label icon via props'
-      examplePath='elements/Label/Content/LabelExampleIconShorthand'
-    />
+    <ShorthandExample examplePath='elements/Label/Content/LabelExampleIconShorthand' />
 
     <ComponentExample
       title='Image'
       description='A label can include an image'
       examplePath='elements/Label/Content/LabelExampleImage'
     />
-    <ComponentExample
-      description='You can also configure an label image via props'
-      examplePath='elements/Label/Content/LabelExampleImageShorthand'
-    />
+    <ShorthandExample examplePath='elements/Label/Content/LabelExampleImageShorthand' />
 
     <ComponentExample
       title='Link'
diff --git a/docs/app/Examples/elements/List/Types/index.js b/docs/app/Examples/elements/List/Types/index.js
index 914b10eedd..9c8bab69af 100644
--- a/docs/app/Examples/elements/List/Types/index.js
+++ b/docs/app/Examples/elements/List/Types/index.js
@@ -3,6 +3,7 @@ import { Message } from 'semantic-ui-react'
 
 import ComponentExample from 'docs/app/Components/ComponentDoc/ComponentExample'
 import ExampleSection from 'docs/app/Components/ComponentDoc/ExampleSection'
+import ShorthandExample from 'docs/app/Components/ComponentDoc/ShorthandExample'
 
 const ListTypes = () => (
   <ExampleSection title='Types'>
@@ -11,19 +12,13 @@ const ListTypes = () => (
       description='A list groups related content'
       examplePath='elements/List/Types/ListExampleBasic'
     />
-    <ComponentExample
-      description='You can also pass an array of items as props'
-      examplePath='elements/List/Types/ListExampleBasicShorthand'
-    />
+    <ShorthandExample examplePath='elements/List/Types/ListExampleBasicShorthand' />
 
     <ComponentExample
       description='A list item can contain an icon'
       examplePath='elements/List/Types/ListExampleIcon'
     />
-    <ComponentExample
-      description='You can also define a list item icon via props'
-      examplePath='elements/List/Types/ListExampleIconShorthand'
-    />
+    <ShorthandExample examplePath='elements/List/Types/ListExampleIconShorthand' />
 
     <ComponentExample examplePath='elements/List/Types/ListExampleDivided' />
     <ComponentExample examplePath='elements/List/Types/ListExampleTree' />
diff --git a/docs/app/Examples/elements/Loader/Types/index.js b/docs/app/Examples/elements/Loader/Types/index.js
index ea360941ef..b656ee3e47 100644
--- a/docs/app/Examples/elements/Loader/Types/index.js
+++ b/docs/app/Examples/elements/Loader/Types/index.js
@@ -3,6 +3,7 @@ import { Message } from 'semantic-ui-react'
 
 import ComponentExample from 'docs/app/Components/ComponentDoc/ComponentExample'
 import ExampleSection from 'docs/app/Components/ComponentDoc/ExampleSection'
+import ShorthandExample from 'docs/app/Components/ComponentDoc/ShorthandExample'
 
 const LoaderTypesExamples = () => (
   <ExampleSection title='Types'>
@@ -21,10 +22,7 @@ const LoaderTypesExamples = () => (
       description='A loader can contain text.'
       examplePath='elements/Loader/Types/LoaderExampleText'
     />
-    <ComponentExample
-      description='A loader can contain text with shorthand prop.'
-      examplePath='elements/Loader/Types/LoaderExampleTextShorthand'
-    />
+    <ShorthandExample examplePath='elements/Loader/Types/LoaderExampleTextShorthand' />
   </ExampleSection>
 )
 
diff --git a/docs/app/Examples/elements/Step/Variations/index.js b/docs/app/Examples/elements/Step/Variations/index.js
index 6c0a281995..fc04b34268 100644
--- a/docs/app/Examples/elements/Step/Variations/index.js
+++ b/docs/app/Examples/elements/Step/Variations/index.js
@@ -15,6 +15,7 @@ const StepVariationsExamples = () => (
       title='Unstackable'
       description='A step can prevent itself from stacking on mobile.'
       examplePath='elements/Step/Variations/StepExampleUnstackable'
+      suiVersion='2.2.11'
     />
 
     <ComponentExample
diff --git a/docs/app/Examples/modules/Checkbox/Types/index.js b/docs/app/Examples/modules/Checkbox/Types/index.js
index 9f9610d4ac..10e61d6cb7 100644
--- a/docs/app/Examples/modules/Checkbox/Types/index.js
+++ b/docs/app/Examples/modules/Checkbox/Types/index.js
@@ -3,6 +3,7 @@ import { Message } from 'semantic-ui-react'
 
 import ComponentExample from 'docs/app/Components/ComponentDoc/ComponentExample'
 import ExampleSection from 'docs/app/Components/ComponentDoc/ExampleSection'
+import ShorthandExample from 'docs/app/Components/ComponentDoc/ShorthandExample'
 
 const CheckboxTypesExamples = () => (
   <ExampleSection title='Types'>
@@ -17,11 +18,11 @@ const CheckboxTypesExamples = () => (
       description='A box for checking.'
       examplePath='modules/Checkbox/Types/CheckboxExampleCheckbox'
     />
-    <ComponentExample
+    <ShorthandExample
       description='You can define a label with a props object.'
       examplePath='modules/Checkbox/Types/CheckboxExampleShorthandObject'
     />
-    <ComponentExample
+    <ShorthandExample
       description='You can define a label by passing your own element.'
       examplePath='modules/Checkbox/Types/CheckboxExampleShorthandElement'
     />
diff --git a/docs/app/Examples/modules/Dropdown/Usage/index.js b/docs/app/Examples/modules/Dropdown/Usage/index.js
index 25143eb24d..50ef11b701 100644
--- a/docs/app/Examples/modules/Dropdown/Usage/index.js
+++ b/docs/app/Examples/modules/Dropdown/Usage/index.js
@@ -1,6 +1,8 @@
 import React from 'react'
+
 import ComponentExample from 'docs/app/Components/ComponentDoc/ComponentExample'
 import ExampleSection from 'docs/app/Components/ComponentDoc/ExampleSection'
+import ShorthandExample from 'docs/app/Components/ComponentDoc/ShorthandExample'
 
 const DropdownUsageExamples = () => (
   <ExampleSection title='Usage'>
@@ -76,7 +78,7 @@ const DropdownUsageExamples = () => (
       description='A dropdown item can be rendered differently inside the menu.'
       examplePath='modules/Dropdown/Usage/DropdownExampleItemContent'
     />
-    <ComponentExample
+    <ShorthandExample
       title='Search Input'
       description='A dropdown implements a search input shorthand.'
       examplePath='modules/Dropdown/Usage/DropdownExampleSearchInput'
diff --git a/docs/app/Examples/modules/Modal/Types/index.js b/docs/app/Examples/modules/Modal/Types/index.js
index 0566dc7619..b8418f24fe 100644
--- a/docs/app/Examples/modules/Modal/Types/index.js
+++ b/docs/app/Examples/modules/Modal/Types/index.js
@@ -1,6 +1,8 @@
 import React from 'react'
+
 import ComponentExample from 'docs/app/Components/ComponentDoc/ComponentExample'
 import ExampleSection from 'docs/app/Components/ComponentDoc/ExampleSection'
+import ShorthandExample from 'docs/app/Components/ComponentDoc/ShorthandExample'
 
 import { Message } from 'semantic-ui-react'
 
@@ -36,10 +38,10 @@ const ModalExamples = () => (
     />
     <ComponentExample
       title='Controlled'
-      description='A modal can be a controlled component'
+      description='A modal can be a controlled component.'
       examplePath='modules/Modal/Types/ModalExampleControlled'
     />
-    <ComponentExample
+    <ShorthandExample
       title='Shorthand'
       description='A modal can be created with shorthand props.'
       examplePath='modules/Modal/Types/ModalExampleShorthand'
diff --git a/docs/app/Examples/modules/Modal/Variations/index.js b/docs/app/Examples/modules/Modal/Variations/index.js
index d744ad04bf..301fffc952 100644
--- a/docs/app/Examples/modules/Modal/Variations/index.js
+++ b/docs/app/Examples/modules/Modal/Variations/index.js
@@ -14,6 +14,7 @@ const ModalExamples = () => (
       title='Scrolling Content'
       description='A modal can use the entire size of the screen.'
       examplePath='modules/Modal/Variations/ModalExampleScrollingContent'
+      suiVersion='2.2.11'
     />
     <ComponentExample
       title='Dimmer Variations'
diff --git a/docs/app/Examples/modules/Search/Variations/index.js b/docs/app/Examples/modules/Search/Variations/index.js
index 2528b24839..943bb12975 100644
--- a/docs/app/Examples/modules/Search/Variations/index.js
+++ b/docs/app/Examples/modules/Search/Variations/index.js
@@ -2,6 +2,7 @@ import React from 'react'
 
 import ComponentExample from 'docs/app/Components/ComponentDoc/ComponentExample'
 import ExampleSection from 'docs/app/Components/ComponentDoc/ExampleSection'
+import ShorthandExample from 'docs/app/Components/ComponentDoc/ShorthandExample'
 
 const SearchVariationsExamples = () => (
   <ExampleSection title='Variations'>
@@ -15,7 +16,7 @@ const SearchVariationsExamples = () => (
       description='A search can have its results aligned to its left or right container edge.'
       examplePath='modules/Search/Variations/SearchExampleAligned'
     />
-    <ComponentExample
+    <ShorthandExample
       title='Input'
       description='A search can be passed an input via shorthand props.'
       examplePath='modules/Search/Variations/SearchExampleInput'
diff --git a/docs/app/Examples/modules/Tab/Usage/index.js b/docs/app/Examples/modules/Tab/Usage/index.js
index c00cee47b6..4264a50624 100644
--- a/docs/app/Examples/modules/Tab/Usage/index.js
+++ b/docs/app/Examples/modules/Tab/Usage/index.js
@@ -1,6 +1,8 @@
 import React from 'react'
+
 import ComponentExample from 'docs/app/Components/ComponentDoc/ComponentExample'
 import ExampleSection from 'docs/app/Components/ComponentDoc/ExampleSection'
+import ShorthandExample from 'docs/app/Components/ComponentDoc/ShorthandExample'
 
 const TabUsageExamples = () => (
   <ExampleSection title='Usage'>
@@ -19,7 +21,7 @@ const TabUsageExamples = () => (
       description='You can capture the tab change event.'
       examplePath='modules/Tab/Usage/TabExampleOnTabChange'
     />
-    <ComponentExample
+    <ShorthandExample
       title='Custom Menu Items'
       description='You can pass any shorthand value as a menu item.'
       examplePath='modules/Tab/Usage/TabExampleCustomMenuItem'
diff --git a/docs/app/Examples/views/Feed/Content/index.js b/docs/app/Examples/views/Feed/Content/index.js
index 18564346f6..a743f79afb 100644
--- a/docs/app/Examples/views/Feed/Content/index.js
+++ b/docs/app/Examples/views/Feed/Content/index.js
@@ -1,64 +1,52 @@
 import React from 'react'
+
 import ComponentExample from 'docs/app/Components/ComponentDoc/ComponentExample'
 import ExampleSection from 'docs/app/Components/ComponentDoc/ExampleSection'
+import ShorthandExample from 'docs/app/Components/ComponentDoc/ShorthandExample'
 
 const FeedContentExamples = () => (
   <ExampleSection title='Content'>
     <ComponentExample
       title='Image Label'
-      description='An event can contain an image label'
+      description='An event can contain an image label.'
       examplePath='views/Feed/Content/FeedExampleImageLabel'
     />
-    <ComponentExample
-      description='You can also configure an image label via props'
-      examplePath='views/Feed/Content/FeedExampleImageLabelShorthand'
-    />
+    <ShorthandExample examplePath='views/Feed/Content/FeedExampleImageLabelShorthand' />
+
     <ComponentExample
       title='Icon Label'
-      description='An event can contain an icon label'
+      description='An event can contain an icon label.'
       examplePath='views/Feed/Content/FeedExampleIconLabel'
     />
-    <ComponentExample
-      description='You can also configure an icon label via props'
-      examplePath='views/Feed/Content/FeedExampleIconLabelShorthand'
-    />
+    <ShorthandExample examplePath='views/Feed/Content/FeedExampleIconLabelShorthand' />
 
     <ComponentExample
       title='Content Date'
-      description='Event content can contain a date'
+      description='Event content can contain a date.'
       examplePath='views/Feed/Content/FeedExampleContentDate'
     />
-    <ComponentExample
-      description='You can also configure a content date via props'
-      examplePath='views/Feed/Content/FeedExampleContentDateShorthand'
-    />
+    <ShorthandExample examplePath='views/Feed/Content/FeedExampleContentDateShorthand' />
+
     <ComponentExample
       title='Summary Date'
-      description='An event summary can contain a date'
+      description='An event summary can contain a date.'
       examplePath='views/Feed/Content/FeedExampleSummaryDate'
     />
-    <ComponentExample
-      description='You can also configure a summary date via props'
-      examplePath='views/Feed/Content/FeedExampleSummaryDateShorthand'
-    />
+    <ShorthandExample examplePath='views/Feed/Content/FeedExampleSummaryDateShorthand' />
+
     <ComponentExample
       title='Extra Images'
-      description='An event can contain extra images'
+      description='An event can contain extra images.'
       examplePath='views/Feed/Content/FeedExampleExtraImages'
     />
-    <ComponentExample
-      description='You can also configure extra images via props'
-      examplePath='views/Feed/Content/FeedExampleExtraImagesShorthand'
-    />
-    <ComponentExample
+    <ShorthandExample examplePath='views/Feed/Content/FeedExampleExtraImagesShorthand' />
+
+    <ShorthandExample
       title='Extra Text'
-      description='An event can contain extra text'
+      description='An event can contain extra text.'
       examplePath='views/Feed/Content/FeedExampleExtraText'
     />
-    <ComponentExample
-      description='You can also configure extra text via props'
-      examplePath='views/Feed/Content/FeedExampleExtraTextShorthand'
-    />
+    <ShorthandExample examplePath='views/Feed/Content/FeedExampleExtraTextShorthand' />
   </ExampleSection>
 )
 
diff --git a/docs/app/HOC/index.js b/docs/app/HOC/index.js
index f65e11d07d..072a6b5e7c 100644
--- a/docs/app/HOC/index.js
+++ b/docs/app/HOC/index.js
@@ -1,2 +1,3 @@
 export neverUpdate from './neverUpdate'
+export pure from './pure'
 export updateForKeys from './updateForKeys'
diff --git a/docs/app/HOC/pure.js b/docs/app/HOC/pure.js
new file mode 100644
index 0000000000..f0d68ab18f
--- /dev/null
+++ b/docs/app/HOC/pure.js
@@ -0,0 +1,15 @@
+import React, { Component } from 'react'
+
+import { shallowEqual } from 'src/lib'
+
+const pure = ChildComponent => class extends Component {
+  shouldComponentUpdate(nextProps) {
+    return !shallowEqual(this.props, nextProps)
+  }
+
+  render() {
+    return <ChildComponent {...this.props} />
+  }
+}
+
+export default pure