diff --git a/package.json b/package.json
index e5aa21ec..e5acbedb 100644
--- a/package.json
+++ b/package.json
@@ -60,7 +60,7 @@
     "typescript": "^5.0.2"
   },
   "peerDependencies": {
-    "vue": ">=3.3.0",
+    "vue": ">=3.5.0",
     "vue-router": "^4.1.6"
   },
   "devDependencies": {
diff --git a/src/components/ListView.story.md b/src/components/ListView/ListView.story.md
similarity index 100%
rename from src/components/ListView.story.md
rename to src/components/ListView/ListView.story.md
diff --git a/src/components/ListView.story.vue b/src/components/ListView/ListView.story.vue
similarity index 94%
rename from src/components/ListView.story.vue
rename to src/components/ListView/ListView.story.vue
index 929e548b..97d6394c 100644
--- a/src/components/ListView.story.vue
+++ b/src/components/ListView/ListView.story.vue
@@ -1,17 +1,16 @@
 <script setup>
 import { reactive, h, ref } from 'vue'
-import Avatar from './Avatar.vue'
-import Badge from './Badge.vue'
-import { Button } from './Button'
-import FeatherIcon from './FeatherIcon.vue'
-import ListHeader from './ListView/ListHeader.vue'
-import ListHeaderItem from './ListView/ListHeaderItem.vue'
-import ListRow from './ListView/ListRow.vue'
-import ListRowItem from './ListView/ListRowItem.vue'
-import ListRows from './ListView/ListRows.vue'
-import ListGroups from './ListView/ListGroups.vue'
-import ListSelectBanner from './ListView/ListSelectBanner.vue'
-import ListView from './ListView/ListView.vue'
+import Avatar from '../Avatar.vue'
+import Badge from '../Badge.vue'
+import { Button } from '../Button'
+import FeatherIcon from '../FeatherIcon.vue'
+import ListHeader from './ListHeader.vue'
+import ListHeaderItem from './ListHeaderItem.vue'
+import ListRow from './ListRow.vue'
+import ListRowItem from './ListRowItem.vue'
+import ListRows from './ListRows.vue'
+import ListSelectBanner from './ListSelectBanner.vue'
+import ListView from './ListView.vue'
 
 const state = reactive({
   selectable: true,
diff --git a/src/components/ListView/ListView.vue b/src/components/ListView/ListView.vue
index cd9abcc2..9d9df102 100644
--- a/src/components/ListView/ListView.vue
+++ b/src/components/ListView/ListView.vue
@@ -143,4 +143,11 @@ provide(
     toggleAllRows,
   })),
 )
+
+defineExpose({
+  selections,
+  allRowsSelected,
+  toggleRow,
+  toggleAllRows,
+})
 </script>
diff --git a/src/components/Tabs.story.md b/src/components/Tabs.story.md
deleted file mode 100644
index f9d3a9a7..00000000
--- a/src/components/Tabs.story.md
+++ /dev/null
@@ -1,15 +0,0 @@
-## Props
-
-### Tabs
-
-It is an array of objects which contains the following attributes:
-
-1. `label` is the name of the tab, it is required.
-2. `icon` is the icon to be shown in the tab, it accept component and it is
-   optional.
-3. You can add more attributes which can be used for custom rendering in the tab
-   header or content.
-
-## v-model
-
-It is used to set the active tab or change the active tab. It is required.
diff --git a/src/components/Tabs.vue b/src/components/Tabs.vue
deleted file mode 100644
index e8f3ce41..00000000
--- a/src/components/Tabs.vue
+++ /dev/null
@@ -1,110 +0,0 @@
-<template>
-  <TabGroup
-    as="div"
-    class="flex flex-1 flex-col overflow-y-hidden"
-    :style="`height: calc(100vh - ${tabListRef?.$el.offsetTop}px)`"
-    :defaultIndex="changedIndex"
-    :selectedIndex="changedIndex"
-    @change="(idx) => (changedIndex = idx)"
-  >
-    <TabList
-      ref="tabListRef"
-      class="relative flex items-center gap-7.5 overflow-x-auto border-b px-5"
-      :class="tablistClass"
-    >
-      <Tab
-        ref="tabRef"
-        as="template"
-        v-for="(tab, i) in tabs"
-        :key="i"
-        v-slot="{ selected }"
-        class="focus:outline-none focus:transition-none"
-      >
-        <slot name="tab" v-bind="{ tab, selected }">
-          <button
-            class="flex items-center gap-1.5 border-b border-transparent py-3 text-base text-ink-gray-5 duration-300 ease-in-out hover:border-outline-gray-3 hover:text-ink-gray-9"
-            :class="{ 'text-ink-gray-9': selected }"
-          >
-            <component v-if="tab.icon" :is="tab.icon" class="size-4" />
-            {{ tab.label }}
-          </button>
-        </slot>
-      </Tab>
-      <div
-        ref="indicator"
-        class="tab-indicator absolute bottom-0 h-px bg-surface-gray-7"
-        :class="transitionClass"
-      />
-    </TabList>
-    <TabPanels class="flex flex-1 overflow-hidden" :class="tabPanelClass">
-      <TabPanel
-        class="flex flex-1 flex-col overflow-y-auto focus:outline-none"
-        v-for="(tab, i) in tabs"
-        :key="i"
-      >
-        <slot v-bind="{ tab }" />
-      </TabPanel>
-    </TabPanels>
-  </TabGroup>
-</template>
-
-<script setup>
-import { TabGroup, TabList, Tab, TabPanels, TabPanel } from '@headlessui/vue'
-import { ref, watch, computed, onMounted, nextTick } from 'vue'
-
-const props = defineProps({
-  tabs: {
-    type: Array,
-    required: true,
-  },
-  modelValue: {
-    type: Number,
-    default: 0,
-  },
-  tablistClass: {
-    type: String,
-    default: '',
-  },
-  tabPanelClass: {
-    type: String,
-    default: '',
-  },
-})
-
-const emit = defineEmits(['update:modelValue'])
-
-const changedIndex = computed({
-  get: () => props.modelValue,
-  set: (index) => emit('update:modelValue', index),
-})
-
-const tabListRef = ref(null)
-const tabRef = ref([])
-const indicator = ref(null)
-const tabsLength = computed(() => props.tabs?.length)
-
-const transitionClass = ref('')
-
-function moveIndicator(index) {
-  if (index >= tabsLength.value) {
-    index = tabsLength.value - 1
-  }
-  const selectedTab = tabRef.value[index].el
-  indicator.value.style.width = `${selectedTab.offsetWidth}px`
-  indicator.value.style.left = `${selectedTab.offsetLeft}px`
-}
-
-watch(changedIndex, (index) => {
-  if (index >= tabsLength.value) {
-    changedIndex.value = tabsLength.value - 1
-  }
-  transitionClass.value = 'transition-all duration-300 ease-in-out'
-  nextTick(() => moveIndicator(index))
-})
-
-onMounted(() => {
-  nextTick(() => moveIndicator(changedIndex.value))
-  // Fix for indicator not moving on initial load
-  setTimeout(() => moveIndicator(changedIndex.value), 100)
-})
-</script>
diff --git a/src/components/Tabs/TabList.vue b/src/components/Tabs/TabList.vue
new file mode 100644
index 00000000..5eb943a7
--- /dev/null
+++ b/src/components/Tabs/TabList.vue
@@ -0,0 +1,81 @@
+<template>
+  <TabList
+    class="relative flex"
+    :class="
+      vertical
+        ? 'flex-col border-r overflow-y-auto'
+        : 'gap-7.5 border-b overflow-x-auto items-center px-5'
+    "
+  >
+    <Tab
+      ref="tabRef"
+      as="template"
+      v-for="(tab, i) in tabs"
+      :key="i"
+      v-slot="{ selected }"
+      class="focus:outline-none focus:transition-none"
+    >
+      <slot v-bind="{ tab, selected }">
+        <button
+          class="flex items-center gap-1.5 text-base text-ink-gray-5 duration-300 ease-in-out hover:text-ink-gray-9"
+          :class="[
+            selected ? 'text-ink-gray-9' : '',
+            vertical
+              ? 'py-2.5 px-4 border-r border-transparent hover:border-outline-gray-3'
+              : 'py-3 border-b border-transparent hover:border-outline-gray-3',
+          ]"
+        >
+          <component v-if="tab.icon" :is="tab.icon" class="size-4" />
+          {{ tab.label }}
+        </button>
+      </slot>
+    </Tab>
+    <div
+      ref="indicator"
+      class="tab-indicator absolute bg-surface-gray-7"
+      :class="[vertical ? 'right-0 w-px' : 'bottom-0 h-px', transitionClass]"
+    />
+  </TabList>
+</template>
+<script setup>
+import { TabList, Tab } from '@headlessui/vue'
+import { ref, watch, computed, onMounted, nextTick, inject } from 'vue'
+
+const tabIndex = inject('tabIndex')
+const tabs = inject('tabs')
+const vertical = inject('vertical')
+
+const tabRef = ref([])
+const indicator = ref(null)
+const tabsLength = computed(() => tabs.value?.length)
+
+const transitionClass = ref('')
+
+function moveIndicator(index) {
+  if (index >= tabsLength.value) {
+    index = tabsLength.value - 1
+  }
+  const selectedTab = tabRef.value[index].el
+  if (vertical) {
+    indicator.value.style.height = `${selectedTab.offsetHeight}px`
+    indicator.value.style.top = `${selectedTab.offsetTop}px`
+  } else {
+    indicator.value.style.width = `${selectedTab.offsetWidth}px`
+    indicator.value.style.left = `${selectedTab.offsetLeft}px`
+  }
+}
+
+watch(tabIndex, (index) => {
+  if (index >= tabsLength.value) {
+    tabIndex.value = tabsLength.value - 1
+  }
+  transitionClass.value = 'transition-all duration-300 ease-in-out'
+  nextTick(() => moveIndicator(index))
+})
+
+onMounted(() => {
+  nextTick(() => moveIndicator(tabIndex.value))
+  // Fix for indicator not moving on initial load
+  setTimeout(() => moveIndicator(tabIndex.value), 100)
+})
+</script>
diff --git a/src/components/Tabs/TabPanel.vue b/src/components/Tabs/TabPanel.vue
new file mode 100644
index 00000000..071e18f0
--- /dev/null
+++ b/src/components/Tabs/TabPanel.vue
@@ -0,0 +1,17 @@
+<template>
+  <TabPanels class="flex flex-1 overflow-hidden">
+    <TabPanel
+      class="flex flex-1 flex-col overflow-y-auto focus:outline-none"
+      v-for="(tab, i) in tabs"
+      :key="i"
+    >
+      <slot v-bind="{ tab }" />
+    </TabPanel>
+  </TabPanels>
+</template>
+<script setup>
+import { TabPanels, TabPanel } from '@headlessui/vue'
+import { inject } from 'vue'
+
+const tabs = inject('tabs')
+</script>
diff --git a/src/components/Tabs/Tabs.story.md b/src/components/Tabs/Tabs.story.md
new file mode 100644
index 00000000..12e22297
--- /dev/null
+++ b/src/components/Tabs/Tabs.story.md
@@ -0,0 +1,97 @@
+## Props
+
+### tabs
+
+It is an array of objects which contains the following attributes:
+
+1. `label` is the name of the tab, it is required.
+2. `icon` is the icon to be shown in the tab, it accept component and it is
+   optional.
+3. You can add more attributes which can be used for custom rendering in the tab
+   header or content.
+
+### v-model
+
+It is used to set the active tab or change the active tab. It is required.
+
+### vertical
+
+It is used to show the tabs vertically. It is optional.
+
+### as
+
+You can set it to `div` to wrap tabs in a `div`. It can be any valid HTML tag.
+This is useful to control the layout of the tabs. It is optional.
+
+1. `as="div"` or any valid HTML tag
+
+```html
+<div>
+  <!-- container div -->
+  <div>
+    <div active>Tab 1</div>
+    <div>Tab 2</div>
+    <div>Tab 3</div>
+  </div>
+  <div>
+    <div active>Content 1</div>
+    <div>Content 2</div>
+    <div>Content 3</div>
+  </div>
+</div>
+```
+
+2. `as` is not set
+
+```html
+<div>
+  <div active>Tab 1</div>
+  <div>Tab 2</div>
+  <div>Tab 3</div>
+</div>
+<div>
+  <div active>Content 1</div>
+  <div>Content 2</div>
+  <div>Content 3</div>
+</div>
+```
+
+## Slots
+
+1. **tab-item:** You can use this slot to render custom tab items. It is
+   optional.
+2. **tab-panel:** You can use this slot to render custom tab panels. It is
+   required. Example:
+
+```vue
+<Tabs v-model="tabIndex" :tabs="tabs">
+   <template #tab-item="{ tab, selected }">
+      <div :class="{ 'text-gray-900 font-semibold': selected }">
+         <span>{{ tab.label }}</span>
+         <span>{{ tab.icon }}</span>
+      </div>
+   </template>
+   <template #tab-panel="{ tab }">
+      <div>{{ tab.content }}</div>
+   </template>
+</Tabs>
+```
+
+## Layout Customization
+
+You can customize the layout of the tabs by using `<TabList />` and `<TabPanels />`
+components.
+
+```vue
+<Tabs v-model="tabIndex" :tabs="tabs">
+   <TabList v-slot="{ tab, selected }">
+      <div :class="{ 'text-gray-900 font-semibold': selected }">
+         <span>{{ tab.label }}</span>
+         <span>{{ tab.icon }}</span>
+      </div>
+   </TabList>
+   <TabPanel v-slot="{ tab }">
+      <div>{{ tab.content }}</div>
+   </TabPanel>
+</Tabs>
+```
diff --git a/src/components/Tabs.story.vue b/src/components/Tabs/Tabs.story.vue
similarity index 69%
rename from src/components/Tabs.story.vue
rename to src/components/Tabs/Tabs.story.vue
index 71d8e404..d8fdb395 100644
--- a/src/components/Tabs.story.vue
+++ b/src/components/Tabs/Tabs.story.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { h, reactive } from 'vue'
 import Tabs from './Tabs.vue'
-import FeatherIcon from './FeatherIcon.vue'
+import FeatherIcon from '../FeatherIcon.vue'
 const state = reactive({
   index: 0,
   tabs_without_icon: [
@@ -48,20 +48,45 @@ const state = reactive({
   <Story :layout="{ type: 'grid', width: '80%' }">
     <Variant title="Without Icon">
       <Tabs
-        v-slot="{ tab }"
+        as="div"
+        class="border rounded"
         v-model="state.index"
         :tabs="state.tabs_without_icon"
       >
-        <div class="p-5">
-          {{ tab.content }}
-        </div>
+        <template #tab-panel="{ tab }">
+          <div class="p-5">
+            {{ tab.content }}
+          </div>
+        </template>
       </Tabs>
     </Variant>
     <Variant title="With Icon">
-      <Tabs v-slot="{ tab }" v-model="state.index" :tabs="state.tabs_with_icon">
-        <div class="p-5">
-          {{ tab.content }}
-        </div>
+      <Tabs
+        as="div"
+        class="border rounded"
+        v-model="state.index"
+        :tabs="state.tabs_with_icon"
+      >
+        <template #tab-panel="{ tab }">
+          <div class="p-5">
+            {{ tab.content }}
+          </div>
+        </template>
+      </Tabs>
+    </Variant>
+    <Variant title="Vertical Tabs">
+      <Tabs
+        as="div"
+        class="border rounded"
+        v-model="state.index"
+        :tabs="state.tabs_with_icon"
+        vertical
+      >
+        <template #tab-panel="{ tab }">
+          <div class="p-5">
+            {{ tab.content }}
+          </div>
+        </template>
       </Tabs>
     </Variant>
 
diff --git a/src/components/Tabs/Tabs.vue b/src/components/Tabs/Tabs.vue
new file mode 100644
index 00000000..2ec34990
--- /dev/null
+++ b/src/components/Tabs/Tabs.vue
@@ -0,0 +1,52 @@
+<template>
+  <TabGroup
+    v-bind="
+      as !== 'template'
+        ? {
+            as,
+            class: ['flex flex-1 overflow-hidden', vertical ? '' : 'flex-col '],
+          }
+        : {}
+    "
+    :defaultIndex="tabIndex"
+    :selectedIndex="tabIndex"
+    @change="(idx) => (tabIndex = idx)"
+  >
+    <slot>
+      <TabList v-slot="{ tab, selected }">
+        <slot name="tab-item" v-bind="{ tab, selected }" />
+      </TabList>
+      <TabPanel v-slot="{ tab }">
+        <slot name="tab-panel" v-bind="{ tab }" />
+      </TabPanel>
+    </slot>
+  </TabGroup>
+</template>
+
+<script setup>
+import TabList from './TabList.vue'
+import TabPanel from './TabPanel.vue'
+import { TabGroup } from '@headlessui/vue'
+import { provide } from 'vue'
+
+const props = defineProps({
+  as: {
+    type: String,
+    default: 'template',
+  },
+  tabs: {
+    type: Array,
+    required: true,
+  },
+  vertical: {
+    type: Boolean,
+    default: false,
+  },
+})
+
+const tabIndex = defineModel()
+
+provide('tabIndex', tabIndex)
+provide('tabs', props.tabs)
+provide('vertical', props.vertical)
+</script>
diff --git a/src/index.js b/src/index.js
index fea12dbf..fb2d2367 100644
--- a/src/index.js
+++ b/src/index.js
@@ -32,7 +32,9 @@ export { default as Select } from './components/Select.vue'
 export { default as Spinner } from './components/Spinner.vue'
 export { default as Switch } from './components/Switch.vue'
 export { default as TabButtons } from './components/TabButtons.vue'
-export { default as Tabs } from './components/Tabs.vue'
+export { default as Tabs } from './components/Tabs/Tabs.vue'
+export { default as TabList } from './components/Tabs/TabList.vue'
+export { default as TabPanel } from './components/Tabs/TabPanel.vue'
 export { default as TextInput } from './components/TextInput.vue'
 export { default as Textarea } from './components/Textarea.vue'
 export {