diff --git a/ui/app/components/ui/tabs/tabs.component.js b/ui/app/components/ui/tabs/tabs.component.js
index 383332ac9..539e56563 100644
--- a/ui/app/components/ui/tabs/tabs.component.js
+++ b/ui/app/components/ui/tabs/tabs.component.js
@@ -8,7 +8,7 @@ export default class Tabs extends Component {
 
   static propTypes = {
     defaultActiveTabIndex: PropTypes.number,
-    children: PropTypes.node,
+    children: PropTypes.node.isRequired,
   }
 
   state = {
diff --git a/ui/app/components/ui/tabs/tabs.stories.js b/ui/app/components/ui/tabs/tabs.stories.js
new file mode 100644
index 000000000..32699d07b
--- /dev/null
+++ b/ui/app/components/ui/tabs/tabs.stories.js
@@ -0,0 +1,57 @@
+import React from 'react'
+import Tab from './tab/tab.component'
+import Tabs from './tabs.component'
+import { number, text } from '@storybook/addon-knobs/react'
+
+export default {
+  title: 'Tabs',
+}
+
+function renderTab (id) {
+  return (
+    <Tab
+      name={text(`Tab ${id} Name`, `Tab ${id}`)}
+      key={id}
+    >
+      {text(`Tab ${id} Contents`, `Contents of Tab ${id}`)}
+    </Tab>
+  )
+}
+
+export const twoTabs = () => {
+  return (
+    <Tabs
+      defaultActiveTabIndex={number('Default Active Tab Index', 0, { min: 0 })}
+    >
+      {
+        ['A', 'B']
+          .map(renderTab)
+      }
+    </Tabs>
+  )
+}
+
+export const manyTabs = () => {
+  return (
+    <Tabs
+      defaultActiveTabIndex={number('Default Active Tab Index', 0, { min: 0 })}
+    >
+      {
+        ['A', 'B', 'C', 'D', 'E']
+          .map(renderTab)
+      }
+    </Tabs>
+  )
+}
+
+export const singleTab = () => {
+  return (
+    <Tabs>
+      <Tab
+        name={text('Name', 'Single A')}
+      >
+        {text('Contents', 'Contents of tab')}
+      </Tab>
+    </Tabs>
+  )
+}