diff --git a/docs/docs/components/tab.mdx b/docs/docs/components/tab.mdx
new file mode 100644
index 0000000..197dee0
--- /dev/null
+++ b/docs/docs/components/tab.mdx
@@ -0,0 +1,230 @@
+# Tabs
+
+### Quick start
+
+Here's a quick start guide to get started with the Tab component
+
+### Importing Component
+
+```jsx
+import { Tab } from "@hover-design/react";
+```
+
+### Code Snippets and Examples
+
+##### Tab Default
+
+import "@hover-design/react/dist/style.css";
+import { Tab } from "@hover-design/react";
+
+```jsx
+const tabData = [
+  {
+    label: "First",
+    value: "first",
+  },
+  {
+    label: "Second",
+    value: "second",
+    disabled: true,
+  },
+  {
+    label: "Third",
+    value: "third",
+    icon: <div style={icon}>O</div>,
+  },
+  {
+    label: "Fourth",
+    value: "fourth",
+    icon: <div style={icon}>O</div>,
+    badge: "13",
+  },
+];
+
+<div className="App">
+  <Tab defaultValue={"first"} tabData={tabData}>
+    {(selectedTab) => <div>{selectedTab.label}</div>}
+  </Tab>
+</div>;
+```
+
+> **_(selectedTab)_** contains the whole tab object which is selected.
+
+<Tab
+  defaultValue={"first"}
+  tabData={[
+    {
+      label: "First",
+      value: "first",
+    },
+    {
+      label: "Second",
+      value: "second",
+      disabled: true,
+    },
+    {
+      label: "Third",
+      value: "third",
+      icon: (
+        <div
+          style={{
+            border: "1px solid black",
+            borderRadius: "50%",
+            height: "16px",
+            width: "16px",
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "center",
+          }}
+        >
+          O
+        </div>
+      ),
+    },
+    {
+      label: "Fourth",
+      value: "fourth",
+      icon: (
+        <div
+          style={{
+            border: "1px solid black",
+            borderRadius: "50%",
+            height: "16px",
+            width: "16px",
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "center",
+          }}
+        >
+          O
+        </div>
+      ),
+      badge: "13",
+    },
+  ]}
+>
+  {(selectedTab) => <div>{selectedTab?.label}</div>}
+</Tab>
+
+##### Controlled Tabs
+
+```jsx
+const [activeTab, setActiveTab] = useState("first");
+
+const tabData = [
+  {
+    label: "First",
+    value: "first",
+  },
+  {
+    label: "Second",
+    value: "second",
+    disabled: true,
+  },
+  {
+    label: "Third",
+    value: "third",
+    icon: <div style={icon}>O</div>,
+  },
+  {
+    label: "Fourth",
+    value: "fourth",
+    icon: <div style={icon}>O</div>,
+    badge: "15",
+  },
+];
+
+<div className="App">
+  <Tab
+    value={activeTab}
+    onChange={(selectedTab) => setActiveTab(selectedTab.value)}
+    value
+    tabData={tabData}
+  >
+    {(selectedTab) => <div>{selectedTab.label}</div>}
+  </Tab>
+</div>;
+```
+
+> **_(tabData)_** contains the whole tab object which is selected.
+
+<Tab
+  grow
+  defaultValue={"first"}
+  tabData={[
+    {
+      label: "First",
+      value: "first",
+    },
+    {
+      label: "Second",
+      value: "second",
+      disabled: true,
+    },
+    {
+      label: "Third",
+      value: "third",
+      icon: (
+        <div
+          style={{
+            border: "1px solid black",
+            borderRadius: "50%",
+            height: "16px",
+            width: "16px",
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "center",
+          }}
+        >
+          O
+        </div>
+      ),
+    },
+    {
+      label: "Fourth",
+      value: "fourth",
+      icon: (
+        <div
+          style={{
+            border: "1px solid black",
+            borderRadius: "50%",
+            height: "16px",
+            width: "16px",
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "center",
+          }}
+        >
+          O
+        </div>
+      ),
+      badge: "13",
+    },
+  ]}
+>
+  {(selectedTab) => <div>{selectedTab?.label}</div>}
+</Tab>
+
+### Props Reference
+
+| Attributes   |                                  Values                                   | Default Value | Optional ? |
+| :----------- | :-----------------------------------------------------------------------: | :-----------: | ---------: |
+| defaultValue | _ must be equal to value from ** Tab Object ** _ `string` &#124; `number` |               |        Yes |
+| value        | _ must be equal to value from ** Tab Object ** _ `string` &#124; `number` |               |        Yes |
+| color        |                                 `string`                                  |   `#2F80ED`   |        Yes |
+| background   |                                 `string`                                  |   `#d7e9ff`   |        Yes |
+| onChange     |                        `(selectedTabObject)=>void`                        |   `()=>{}`    |        Yes |
+| grow         |                   grows to fit the containter `boolean`                   |    `false`    |        Yes |
+| height       |                                 `string`                                  |    `40px`     |        Yes |
+| tabData      |                        `Array of` **_Tab Object_**                        |               |         No |
+| children     |  _ not a prop but children to the `<Tab/>`_ `(selectedTabObject)=> JSX `  |               |         No |
+
+### Tab Object
+
+| Key      |             type              | Optional ? |
+| :------- | :---------------------------: | ---------: |
+| label    |           `string`            |         No |
+| value    |   `string` &#124; `number`    |         No |
+| icon     |         `JSX Element`         |        Yes |
+| disabled |           `boolean`           |        Yes |
+| badge    | `string` &#124; `JSX Element` |        Yes |
diff --git a/lib/package.json b/lib/package.json
index 6e8c16a..38554e3 100644
--- a/lib/package.json
+++ b/lib/package.json
@@ -37,9 +37,7 @@
     "typescript": "^4.3.2",
     "vite": "^2.6.4",
     "vite-plugin-dts": "^0.9.9",
-    "vite-tsconfig-paths": "^3.4.0",
-    "react": "^17.0.0",
-    "react-dom": "^17.0.0"
+    "vite-tsconfig-paths": "^3.4.0"
   },
   "peerDependencies": {
     "react": "^17.0.0 || ^18.0.0",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index d1e9b72..cc2da52 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -102,8 +102,8 @@ importers:
       '@vanilla-extract/vite-plugin': 3.3.0_vite@2.9.15
       deepmerge: 4.2.2
       polished: 4.2.2
-      react: 18.2.0
-      react-dom: 18.2.0_react@18.2.0
+      react: 17.0.2
+      react-dom: 17.0.2_react@17.0.2
     devDependencies:
       '@types/node': 17.0.45
       '@types/react': 18.0.17
@@ -7280,16 +7280,6 @@ packages:
       react: 17.0.2
       scheduler: 0.20.2
 
-  /react-dom/18.2.0_react@18.2.0:
-    resolution: {integrity: sha512-6IMTriUmvsjHUjNtEDudZfuDQUoWXVxKHhlEGSk81n4YFS+r/Kl99wXiwlVXtPBtJenozv2P+hxDsw9eA7Xo6g==}
-    peerDependencies:
-      react: ^18.2.0
-    dependencies:
-      loose-envify: 1.4.0
-      react: 18.2.0
-      scheduler: 0.23.0
-    dev: false
-
   /react-error-overlay/6.0.11:
     resolution: {integrity: sha512-/6UZ2qgEyH2aqzYZgQPxEnz33NJ2gNsnHA2o5+o4wW9bLM/JYQitNP9xPhsXwC08hMMovfGe/8retsdDsczPRg==}
     dev: false
@@ -7417,13 +7407,6 @@ packages:
       loose-envify: 1.4.0
       object-assign: 4.1.1
 
-  /react/18.2.0:
-    resolution: {integrity: sha512-/3IjMdb2L9QbBdWiW5e3P2/npwMBaU9mHCSCUzNln0ZCYbcfTsGbTJrU/kGemdH2IWmB2ioZ+zkxtmq6g09fGQ==}
-    engines: {node: '>=0.10.0'}
-    dependencies:
-      loose-envify: 1.4.0
-    dev: false
-
   /readable-stream/2.3.7:
     resolution: {integrity: sha512-Ebho8K4jIbHAxnuxi7o42OrZgF/ZTNcsZj6nRKyUmkhLFq8CHItp/fy6hQZuZmP/n3yZ9VBUbp4zz/mX8hmYPw==}
     dependencies:
@@ -7712,12 +7695,6 @@ packages:
       loose-envify: 1.4.0
       object-assign: 4.1.1
 
-  /scheduler/0.23.0:
-    resolution: {integrity: sha512-CtuThmgHNg7zIZWAXi3AsyIzA3n4xx7aNyjwC2VJldO2LMVDhFK+63xGqq6CsJH4rTAt6/M+N4GhZiDYPx9eUw==}
-    dependencies:
-      loose-envify: 1.4.0
-    dev: false
-
   /schema-utils/2.7.0:
     resolution: {integrity: sha512-0ilKFI6QQF5nxDZLFn2dMjvc4hjg/Wkg7rHd3jK6/A4a1Hl9VFdQWvgB1UMGoU94pad1P/8N7fMcEnLnSiju8A==}
     engines: {node: '>= 8.9.0'}