diff --git a/docs/app/Examples/elements/Step/Content/Descriptions.js b/docs/app/Examples/elements/Step/Content/StepExampleDescriptions.js
similarity index 87%
rename from docs/app/Examples/elements/Step/Content/Descriptions.js
rename to docs/app/Examples/elements/Step/Content/StepExampleDescriptions.js
index 89bd41f1ed..a213d4d1e5 100644
--- a/docs/app/Examples/elements/Step/Content/Descriptions.js
+++ b/docs/app/Examples/elements/Step/Content/StepExampleDescriptions.js
@@ -3,7 +3,7 @@ import { Step } from 'semantic-ui-react'
 
 const { Description, Group, Title } = Step
 
-const Descriptions = () => (
+const StepExampleDescriptions = () => (
   <div>
     <Group>
       <Step>
@@ -29,4 +29,4 @@ const Descriptions = () => (
   </div>
 )
 
-export default Descriptions
+export default StepExampleDescriptions
diff --git a/docs/app/Examples/elements/Step/Content/Icons.js b/docs/app/Examples/elements/Step/Content/StepExampleIcons.js
similarity index 89%
rename from docs/app/Examples/elements/Step/Content/Icons.js
rename to docs/app/Examples/elements/Step/Content/StepExampleIcons.js
index eda14c6312..018a2f64fb 100644
--- a/docs/app/Examples/elements/Step/Content/Icons.js
+++ b/docs/app/Examples/elements/Step/Content/StepExampleIcons.js
@@ -3,7 +3,7 @@ import { Icon, Step } from 'semantic-ui-react'
 
 const { Content, Description, Group, Title } = Step
 
-const Icons = () => (
+const StepExampleIcons = () => (
   <Group>
     <Step>
       <Icon name='truck' />
@@ -22,4 +22,4 @@ const Icons = () => (
   </Group>
 )
 
-export default Icons
+export default StepExampleIcons
diff --git a/docs/app/Examples/elements/Step/Content/Links.js b/docs/app/Examples/elements/Step/Content/StepExampleLinks.js
similarity index 94%
rename from docs/app/Examples/elements/Step/Content/Links.js
rename to docs/app/Examples/elements/Step/Content/StepExampleLinks.js
index 014e37d50f..7fe9751601 100644
--- a/docs/app/Examples/elements/Step/Content/Links.js
+++ b/docs/app/Examples/elements/Step/Content/StepExampleLinks.js
@@ -11,7 +11,7 @@ class ClickableStep extends Component {
   }
 }
 
-const Links = () => (
+const StepExampleLinks = () => (
   <div>
     <Step.Group>
       <Step active href='http://google.com' icon='truck' title='Shipping' description='Choose your shipping options' />
@@ -34,4 +34,4 @@ const Links = () => (
   </div>
 )
 
-export default Links
+export default StepExampleLinks
diff --git a/docs/app/Examples/elements/Step/Content/index.js b/docs/app/Examples/elements/Step/Content/index.js
index 6626abedf4..23142690c5 100644
--- a/docs/app/Examples/elements/Step/Content/index.js
+++ b/docs/app/Examples/elements/Step/Content/index.js
@@ -2,26 +2,26 @@ import React from 'react'
 import ComponentExample from 'docs/app/Components/ComponentDoc/ComponentExample'
 import ExampleSection from 'docs/app/Components/ComponentDoc/ExampleSection'
 
-const Content = () => (
+const StepContentExamples = () => (
   <ExampleSection title='Content'>
     <ComponentExample
       title='Description'
       description='A step can contain a description.'
-      examplePath='elements/Step/Content/Descriptions'
+      examplePath='elements/Step/Content/StepExampleDescriptions'
     />
 
     <ComponentExample
       title='Icon'
       description='A step can contain an icon.'
-      examplePath='elements/Step/Content/Icons'
+      examplePath='elements/Step/Content/StepExampleIcons'
     />
 
     <ComponentExample
       title='Link'
       description='A step can link.'
-      examplePath='elements/Step/Content/Links'
+      examplePath='elements/Step/Content/StepExampleLinks'
     />
   </ExampleSection>
 )
 
-export default Content
+export default StepContentExamples
diff --git a/docs/app/Examples/elements/Step/Groups/Groups.js b/docs/app/Examples/elements/Step/Groups/StepExampleGroups.js
similarity index 92%
rename from docs/app/Examples/elements/Step/Groups/Groups.js
rename to docs/app/Examples/elements/Step/Groups/StepExampleGroups.js
index 7cef8a6641..65e15b994a 100644
--- a/docs/app/Examples/elements/Step/Groups/Groups.js
+++ b/docs/app/Examples/elements/Step/Groups/StepExampleGroups.js
@@ -8,7 +8,7 @@ const steps = [
   { disabled: true, icon: 'info', title: 'Confirm Order' },
 ]
 
-const Groups = () => (
+const StepExampleGroups = () => (
   <div>
     <Group>
       <Step>
@@ -33,4 +33,4 @@ const Groups = () => (
   </div>
 )
 
-export default Groups
+export default StepExampleGroups
diff --git a/docs/app/Examples/elements/Step/Groups/Ordered.js b/docs/app/Examples/elements/Step/Groups/StepExampleOrdered.js
similarity index 92%
rename from docs/app/Examples/elements/Step/Groups/Ordered.js
rename to docs/app/Examples/elements/Step/Groups/StepExampleOrdered.js
index f558104237..cad9099d72 100644
--- a/docs/app/Examples/elements/Step/Groups/Ordered.js
+++ b/docs/app/Examples/elements/Step/Groups/StepExampleOrdered.js
@@ -8,7 +8,7 @@ const steps = [
   { active: true, title: 'Confirm Order', description: 'Verify order details' },
 ]
 
-const Ordered = () => (
+const StepExampleOrdered = () => (
   <div>
     <Group ordered>
       <Step completed>
@@ -29,4 +29,4 @@ const Ordered = () => (
   </div>
 )
 
-export default Ordered
+export default StepExampleOrdered
diff --git a/docs/app/Examples/elements/Step/Groups/Vertical.js b/docs/app/Examples/elements/Step/Groups/StepExampleVertical.js
similarity index 93%
rename from docs/app/Examples/elements/Step/Groups/Vertical.js
rename to docs/app/Examples/elements/Step/Groups/StepExampleVertical.js
index 93ed8ea05e..08f65a9c9c 100644
--- a/docs/app/Examples/elements/Step/Groups/Vertical.js
+++ b/docs/app/Examples/elements/Step/Groups/StepExampleVertical.js
@@ -8,7 +8,7 @@ const steps = [
   { active: true, icon: 'info', title: 'Confirm Order', description: 'Verify order details' },
 ]
 
-const Vertical = () => (
+const StepExampleVertical = () => (
   <div>
     <Group vertical>
       <Step completed>
@@ -33,4 +33,4 @@ const Vertical = () => (
   </div>
 )
 
-export default Vertical
+export default StepExampleVertical
diff --git a/docs/app/Examples/elements/Step/Groups/index.js b/docs/app/Examples/elements/Step/Groups/index.js
index 577c04ad6a..df5674176f 100644
--- a/docs/app/Examples/elements/Step/Groups/index.js
+++ b/docs/app/Examples/elements/Step/Groups/index.js
@@ -4,12 +4,12 @@ import { Icon, Message } from 'semantic-ui-react'
 import ComponentExample from 'docs/app/Components/ComponentDoc/ComponentExample'
 import ExampleSection from 'docs/app/Components/ComponentDoc/ExampleSection'
 
-const Groups = () => (
+const StepGroupsExamples = () => (
   <ExampleSection title='Groups'>
     <ComponentExample
       title='Steps'
       description='A set of steps.'
-      examplePath='elements/Step/Groups/Groups'
+      examplePath='elements/Step/Groups/StepExampleGroups'
     >
       <Message positive icon>
         <Icon name='mobile' />
@@ -24,15 +24,15 @@ const Groups = () => (
     <ComponentExample
       title='Ordered'
       description='A step can show a ordered sequence of steps.'
-      examplePath='elements/Step/Groups/Ordered'
+      examplePath='elements/Step/Groups/StepExampleOrdered'
     />
 
     <ComponentExample
       title='Vertical'
       description='A step can be displayed stacked vertically.'
-      examplePath='elements/Step/Groups/Vertical'
+      examplePath='elements/Step/Groups/StepExampleVertical'
     />
   </ExampleSection>
 )
 
-export default Groups
+export default StepGroupsExamples
diff --git a/docs/app/Examples/elements/Step/States/Active.js b/docs/app/Examples/elements/Step/States/StepExampleActive.js
similarity index 86%
rename from docs/app/Examples/elements/Step/States/Active.js
rename to docs/app/Examples/elements/Step/States/StepExampleActive.js
index b3140f2143..9638fbf4e1 100644
--- a/docs/app/Examples/elements/Step/States/Active.js
+++ b/docs/app/Examples/elements/Step/States/StepExampleActive.js
@@ -3,7 +3,7 @@ import { Icon, Step } from 'semantic-ui-react'
 
 const { Content, Description, Group, Title } = Step
 
-const Active = () => (
+const StepExampleActive = () => (
   <Group>
     <Step active>
       <Icon name='credit card' />
@@ -17,4 +17,4 @@ const Active = () => (
   </Group>
 )
 
-export default Active
+export default StepExampleActive
diff --git a/docs/app/Examples/elements/Step/States/Completed.js b/docs/app/Examples/elements/Step/States/StepExampleCompleted.js
similarity index 83%
rename from docs/app/Examples/elements/Step/States/Completed.js
rename to docs/app/Examples/elements/Step/States/StepExampleCompleted.js
index 7dd8eb4dfa..321a310110 100644
--- a/docs/app/Examples/elements/Step/States/Completed.js
+++ b/docs/app/Examples/elements/Step/States/StepExampleCompleted.js
@@ -3,7 +3,7 @@ import { Step } from 'semantic-ui-react'
 
 const { Group } = Step
 
-const Completed = () => (
+const StepExampleCompleted = () => (
   <div>
     <Group>
       <Step completed icon='payment' title='Billing' description='Enter billing information' />
@@ -17,4 +17,4 @@ const Completed = () => (
   </div>
 )
 
-export default Completed
+export default StepExampleCompleted
diff --git a/docs/app/Examples/elements/Step/States/Disabled.js b/docs/app/Examples/elements/Step/States/StepExampleDisabled.js
similarity index 65%
rename from docs/app/Examples/elements/Step/States/Disabled.js
rename to docs/app/Examples/elements/Step/States/StepExampleDisabled.js
index d8d3d584f0..a9e7c6cb15 100644
--- a/docs/app/Examples/elements/Step/States/Disabled.js
+++ b/docs/app/Examples/elements/Step/States/StepExampleDisabled.js
@@ -1,10 +1,10 @@
 import React from 'react'
 import { Step } from 'semantic-ui-react'
 
-const Disabled = () => (
+const StepExampleDisabled = () => (
   <Step.Group>
     <Step disabled>Billing</Step>
   </Step.Group>
 )
 
-export default Disabled
+export default StepExampleDisabled
diff --git a/docs/app/Examples/elements/Step/States/index.js b/docs/app/Examples/elements/Step/States/index.js
index 87b14460cb..fd5a73061f 100644
--- a/docs/app/Examples/elements/Step/States/index.js
+++ b/docs/app/Examples/elements/Step/States/index.js
@@ -3,26 +3,24 @@ import ComponentExample from 'docs/app/Components/ComponentDoc/ComponentExample'
 import ExampleSection from 'docs/app/Components/ComponentDoc/ExampleSection'
 
 const States = () => (
-  <ExampleSection title='Groups'>
-    <ExampleSection title='States'>
-      <ComponentExample
-        title='Active'
-        description='A step can be highlighted as active.'
-        examplePath='elements/Step/States/Active'
-      />
+  <ExampleSection title='States'>
+    <ComponentExample
+      title='Active'
+      description='A step can be highlighted as active.'
+      examplePath='elements/Step/States/StepExampleActive'
+    />
 
-      <ComponentExample
-        title='Completed'
-        description='A step can show that a user has completed it.'
-        examplePath='elements/Step/States/Completed'
-      />
+    <ComponentExample
+      title='Completed'
+      description='A step can show that a user has completed it.'
+      examplePath='elements/Step/States/StepExampleCompleted'
+    />
 
-      <ComponentExample
-        title='Disabled'
-        description='A step can show that it cannot be selected.'
-        examplePath='elements/Step/States/Disabled'
-      />
-    </ExampleSection>
+    <ComponentExample
+      title='Disabled'
+      description='A step can show that it cannot be selected.'
+      examplePath='elements/Step/States/StepExampleDisabled'
+    />
   </ExampleSection>
 )
 
diff --git a/docs/app/Examples/elements/Step/Types/Basic.js b/docs/app/Examples/elements/Step/Types/StepExampleBasic.js
similarity index 66%
rename from docs/app/Examples/elements/Step/Types/Basic.js
rename to docs/app/Examples/elements/Step/Types/StepExampleBasic.js
index bd34a82bf5..ea9c7d2bce 100644
--- a/docs/app/Examples/elements/Step/Types/Basic.js
+++ b/docs/app/Examples/elements/Step/Types/StepExampleBasic.js
@@ -1,10 +1,10 @@
 import React from 'react'
 import { Step } from 'semantic-ui-react'
 
-const Basic = () => (
+const StepExampleBasic = () => (
   <Step.Group>
     <Step>Shipping</Step>
   </Step.Group>
 )
 
-export default Basic
+export default StepExampleBasic
diff --git a/docs/app/Examples/elements/Step/Types/index.js b/docs/app/Examples/elements/Step/Types/index.js
index d0e45e77ff..14ed2c9d35 100644
--- a/docs/app/Examples/elements/Step/Types/index.js
+++ b/docs/app/Examples/elements/Step/Types/index.js
@@ -2,14 +2,14 @@ import React from 'react'
 import ComponentExample from 'docs/app/Components/ComponentDoc/ComponentExample'
 import ExampleSection from 'docs/app/Components/ComponentDoc/ExampleSection'
 
-const Types = () => (
+const StepTypesExamples = () => (
   <ExampleSection title='Types'>
     <ComponentExample
       title='Step'
       description='A single step.'
-      examplePath='elements/Step/Types/Basic'
+      examplePath='elements/Step/Types/StepExampleBasic'
     />
   </ExampleSection>
 )
 
-export default Types
+export default StepTypesExamples
diff --git a/docs/app/Examples/elements/Step/Variations/Fluid.js b/docs/app/Examples/elements/Step/Variations/StepExampleFluid.js
similarity index 88%
rename from docs/app/Examples/elements/Step/Variations/Fluid.js
rename to docs/app/Examples/elements/Step/Variations/StepExampleFluid.js
index 3dbed0fcd3..c04dab05a1 100644
--- a/docs/app/Examples/elements/Step/Variations/Fluid.js
+++ b/docs/app/Examples/elements/Step/Variations/StepExampleFluid.js
@@ -1,7 +1,7 @@
 import React from 'react'
 import { Grid, Step } from 'semantic-ui-react'
 
-const Fluid = () => (
+const StepExampleFluid = () => (
   <Grid columns={2}>
     <Grid.Column>
       <Step.Group fluid vertical>
@@ -16,4 +16,4 @@ const Fluid = () => (
   </Grid>
 )
 
-export default Fluid
+export default StepExampleFluid
diff --git a/docs/app/Examples/elements/Step/Variations/Sizes.js b/docs/app/Examples/elements/Step/Variations/StepExampleSizes.js
similarity index 93%
rename from docs/app/Examples/elements/Step/Variations/Sizes.js
rename to docs/app/Examples/elements/Step/Variations/StepExampleSizes.js
index b96831e69e..dae0df727e 100644
--- a/docs/app/Examples/elements/Step/Variations/Sizes.js
+++ b/docs/app/Examples/elements/Step/Variations/StepExampleSizes.js
@@ -11,7 +11,7 @@ const simpleSteps = [
   { active: true, icon: 'payment', title: 'Billing' },
 ]
 
-const Sizes = () => (
+const StepExampleSizes = () => (
   <div>
     <Step.Group size='mini' items={steps} />
     <br />
@@ -35,4 +35,4 @@ const Sizes = () => (
   </div>
 )
 
-export default Sizes
+export default StepExampleSizes
diff --git a/docs/app/Examples/elements/Step/Variations/Stackable.js b/docs/app/Examples/elements/Step/Variations/StepExampleStackable.js
similarity index 84%
rename from docs/app/Examples/elements/Step/Variations/Stackable.js
rename to docs/app/Examples/elements/Step/Variations/StepExampleStackable.js
index d1a6db6b60..4018a008d1 100644
--- a/docs/app/Examples/elements/Step/Variations/Stackable.js
+++ b/docs/app/Examples/elements/Step/Variations/StepExampleStackable.js
@@ -1,7 +1,7 @@
 import React from 'react'
 import { Step } from 'semantic-ui-react'
 
-const Stackable = () => (
+const StepExampleStackable = () => (
   <Step.Group stackable='tablet'>
     <Step icon='plane' title='Shipping' description='Choose your shipping options' />
     <Step active icon='dollar' title='Billing' description='Enter billing information' />
@@ -9,4 +9,4 @@ const Stackable = () => (
   </Step.Group>
 )
 
-export default Stackable
+export default StepExampleStackable
diff --git a/docs/app/Examples/elements/Step/Variations/index.js b/docs/app/Examples/elements/Step/Variations/index.js
index f9baedac18..7b8481178f 100644
--- a/docs/app/Examples/elements/Step/Variations/index.js
+++ b/docs/app/Examples/elements/Step/Variations/index.js
@@ -2,26 +2,26 @@ import React from 'react'
 import ComponentExample from 'docs/app/Components/ComponentDoc/ComponentExample'
 import ExampleSection from 'docs/app/Components/ComponentDoc/ExampleSection'
 
-const Variations = () => (
+const StepVariationsExamples = () => (
   <ExampleSection title='Variations'>
     <ComponentExample
       title='Stackable'
       description='A step can stack vertically only on smaller screens.'
-      examplePath='elements/Step/Variations/Stackable'
+      examplePath='elements/Step/Variations/StepExampleStackable'
     />
 
     <ComponentExample
       title='Fluid'
       description='A fluid step takes up the width of its container.'
-      examplePath='elements/Step/Variations/Fluid'
+      examplePath='elements/Step/Variations/StepExampleFluid'
     />
 
     <ComponentExample
       title='Size'
       description='Steps can have different sizes.'
-      examplePath='elements/Step/Variations/Sizes'
+      examplePath='elements/Step/Variations/StepExampleSizes'
     />
   </ExampleSection>
 )
 
-export default Variations
+export default StepVariationsExamples