diff --git a/src/core/client/ui/components/Tabs/Tab.mdx b/src/core/client/ui/components/Tabs/Tab.mdx
new file mode 100644
index 000000000..365259456
--- /dev/null
+++ b/src/core/client/ui/components/Tabs/Tab.mdx
@@ -0,0 +1,25 @@
+---
+name: TabBar
+menu: UI Kit
+---
+
+import { Playground, PropsTable } from 'docz'
+import HorizontalGutter from '../HorizontalGutter'
+
+
+import TabBar from './TabBar'
+import Tab from './Tab'
+
+# Tab
+`Tab` component is to be used within the `TabBar` component. This renders a Tab inside the Tab Bar.s
+
+## Basic Usage
+<Playground>
+  <HorizontalGutter>
+    <TabBar defaultActiveTab="one">
+      <Tab tabId="one">Tab one</Tab>
+      <Tab tabId="second">Active Tab</Tab>
+      <Tab tabId="three">Tab Three</Tab>
+    </TabBar>
+  </HorizontalGutter>
+</Playground>
diff --git a/src/core/client/ui/components/Tabs/TabBar.mdx b/src/core/client/ui/components/Tabs/TabBar.mdx
index 847efe843..14fc68a3b 100644
--- a/src/core/client/ui/components/Tabs/TabBar.mdx
+++ b/src/core/client/ui/components/Tabs/TabBar.mdx
@@ -16,19 +16,19 @@ import Tab from './Tab'
 <Playground>
   <HorizontalGutter>
 
-    <TabBar defaultActiveId="one">
+    <TabBar defaultActiveTab="one">
       <Tab tabId="one">Tab one</Tab>
       <Tab tabId="second">Active Tab</Tab>
       <Tab tabId="three">Tab Three</Tab>
     </TabBar>
 
-    <TabBar defaultActiveId="one" activeId="second">
+    <TabBar defaultActiveTab="one" activeTab="second">
       <Tab tabId="one">Tab one</Tab>
       <Tab tabId="second">Active Tab</Tab>
       <Tab tabId="three">Tab Three</Tab>
     </TabBar>
 
-    <TabBar defaultActiveId="one" activeId="three">
+    <TabBar defaultActiveTab="one" activeTab="three">
       <Tab tabId="one">Tab one</Tab>
       <Tab tabId="second">Active Tab</Tab>
       <Tab tabId="three">Tab Three</Tab>
@@ -41,7 +41,7 @@ import Tab from './Tab'
 <Playground>
   <HorizontalGutter>
 
-    <TabBar defaultActiveId="one" color="secondary">
+    <TabBar defaultActiveTab="one" color="secondary">
       <Tab tabId="one">Tab one</Tab>
       <Tab tabId="second">Active Tab</Tab>
       <Tab tabId="three">Tab Three</Tab>
diff --git a/src/core/client/ui/components/Tabs/TabBar.tsx b/src/core/client/ui/components/Tabs/TabBar.tsx
index faef9f09e..ab9c6212d 100644
--- a/src/core/client/ui/components/Tabs/TabBar.tsx
+++ b/src/core/client/ui/components/Tabs/TabBar.tsx
@@ -16,7 +16,7 @@ export interface TabBarProps {
   color: "primary" | "secondary";
 
   activeTab?: string;
-  defaultActiveId?: string;
+  defaultActiveTab?: string;
 
   onChange?: (activeId: string) => void;
   onTabClick?: (tabId: string) => void;
@@ -30,7 +30,7 @@ const TabBar: StatelessComponent<TabBarProps> = props => {
     onTabClick,
     activeTab,
     color,
-    defaultActiveId,
+    defaultActiveTab,
   } = props;
 
   const rootClassName = cn(
@@ -49,8 +49,8 @@ const TabBar: StatelessComponent<TabBarProps> = props => {
       React.cloneElement(child, {
         index,
         active:
-          defaultActiveId && !activeTab
-            ? child.props.tabId === defaultActiveId
+          defaultActiveTab && !activeTab
+            ? child.props.tabId === defaultActiveTab
             : child.props.tabId === activeTab,
         color,
         onTabClick,
diff --git a/src/core/client/ui/components/Tabs/TabContent.mdx b/src/core/client/ui/components/Tabs/TabContent.mdx
new file mode 100644
index 000000000..1646887a5
--- /dev/null
+++ b/src/core/client/ui/components/Tabs/TabContent.mdx
@@ -0,0 +1,23 @@
+---
+name: TabContent
+menu: UI Kit
+---
+
+import { Playground, PropsTable } from 'docz'
+import HorizontalGutter from '../HorizontalGutter'
+
+import TabPane from './TabPane'
+import TabContent from './TabContent'
+
+# TabContent
+
+## Basic Use
+<Playground>
+  <HorizontalGutter>
+    <TabContent activeTab="one">
+      <TabPane tabId="one">Hola One</TabPane>
+      <TabPane tabId="two">Hola Two</TabPane>
+      <TabPane tabId="three">Hola Three</TabPane>
+    </TabContent>
+  </HorizontalGutter>
+</Playground>
diff --git a/src/core/client/ui/components/Tabs/TabPane.mdx b/src/core/client/ui/components/Tabs/TabPane.mdx
new file mode 100644
index 000000000..36cb915f0
--- /dev/null
+++ b/src/core/client/ui/components/Tabs/TabPane.mdx
@@ -0,0 +1,23 @@
+---
+name: TabPane
+menu: UI Kit
+---
+
+import { Playground, PropsTable } from 'docz'
+import HorizontalGutter from '../HorizontalGutter'
+
+import TabPane from './TabPane'
+import TabContent from './TabContent'
+
+# TabPane
+
+## Basic Use
+<Playground>
+  <HorizontalGutter>
+    <TabContent activeTab="one">
+      <TabPane tabId="one">Hola One</TabPane>
+      <TabPane tabId="two">Hola Two</TabPane>
+      <TabPane tabId="three">Hola Three</TabPane>
+    </TabContent>
+  </HorizontalGutter>
+</Playground>