feat(Tabs): new component (#450)

docs/components/content/examples/TabsExampleDefaultSlot.vue

@@ -0,0 +1,29 @@
+<script setup>
+const items = [{
+  label: 'Getting Started',
+  icon: 'i-heroicons-information-circle',
+  content: 'This is the content shown for Tab1'
+}, {
+  label: 'Installation',
+  icon: 'i-heroicons-arrow-down-tray',
+  content: 'And, this is the content for Tab2'
+}, {
+  label: 'Theming',
+  icon: 'i-heroicons-eye-dropper',
+  content: 'Finally, this is the content for Tab3'
+}]
+</script>
+
+<template>
+  <UTabs :items="items" class="w-full">
+    <template #default="{ item, index, selected }">
+      <div class="flex items-center gap-2 relative truncate">
+        <UIcon :name="item.icon" class="w-4 h-4 flex-shrink-0" />
+
+        <span class="truncate">{{ index + 1 }}. {{ item.label }}</span>
+
+        <span v-if="selected" class="absolute -right-4 w-2 h-2 rounded-full bg-primary-500 dark:bg-primary-400" />
+      </div>
+    </template>
+  </UTabs>
+</template>