---
title: Basic Tabs
category: Application
paid: false
isActive: true
ltr: {"vue":{"vueTail":[{"label":"App.vue","code":"<template>\n  <TabsRoot class=\"max-w-screen-xl mx-auto px-4 md:px-8\" :default-value=\"selectedTab\">\n    <TabsList class=\"w-full border-b flex items-center gap-x-3 overflow-x-auto text-sm\" aria-label=\"Manage your account\">\n      <TabsTrigger\n        v-for=\"(item, idx) in tabItems\"\n        :key=\"idx\"\n        class=\"group outline-none py-1.5 border-b-2 border-white text-gray-500 data-[state=active]:border-indigo-600 data-[state=active]:text-indigo-600\"\n        :value=\"item\"\n        @click=\"selectedTab = item\"\n      >\n        <div class=\"py-1.5 px-3 rounded-lg duration-150 group-hover:text-indigo-600 group-hover:bg-gray-50 group-active:bg-gray-100 font-medium\">\n          {{ item }}\n        </div>\n      </TabsTrigger>\n    </TabsList>\n    <TabsContent v-for=\"(item, idx) in tabItems\" :key=\"idx\" class=\"py-6\" :value=\"item\">\n      <p class=\"text-xs leading-normal\">\n        This is <b>{{ item }}</b> Tab\n      </p>\n    </TabsContent>\n  </TabsRoot>\n</template>\n\n<script setup>\nimport { ref } from 'vue';\nimport { TabsContent, TabsList, TabsRoot, TabsTrigger } from 'radix-vue';\n\nconst selectedTab = ref(\"Overview\");\n\nconst tabItems = [\n  \"Overview\",\n  \"Integration\",\n  \"Billing\",\n  \"Transactions\",\n  \"plans\",\n];\n</script>"}],"vueCss":[]},"html":{"htmlTail":[{"label":"index.html","code":"<div x-data=\"{ selectedTab: 'Overview', tabItems: ['Overview', 'Integration', 'Billing', 'Transactions', 'plans'] }\">\n    <div class=\"max-w-screen-xl mx-auto px-4 md:px-8\">\n        <div class=\"w-full border-b flex items-center gap-x-3 overflow-x-auto text-sm\" aria-label=\"Manage your account\">\n            <template x-for=\"(item, index) in tabItems\" :key=\"index\">\n                <button\n                    @click=\"selectedTab = item\"\n                    :class=\"{'border-indigo-600 text-indigo-600': selectedTab === item, 'border-white text-gray-500': selectedTab !== item}\"\n                    class=\"group outline-none py-1.5 border-b-2\">\n                    <div class=\"py-1.5 px-3 rounded-lg duration-150 group-hover:text-indigo-600 group-hover:bg-gray-50 group-active:bg-gray-100 font-medium\" x-text=\"item\">\n                    </div>\n                </button>\n            </template>\n        </div>\n        <template x-for=\"(item, index) in tabItems\" :key=\"index\">\n            <div x-show=\"selectedTab === item\" class=\"py-6\">\n                <p class=\"text-xs leading-normal\">\n                    <span>This is </span><b x-text=\"item\"></b><span> Tab</span>\n                </p>\n            </div>\n        </template>\n    </div>\n</div>"}]},"svelte":{"svelteTail":[]},"preview":"function App() {\n  \nconst tabItems = [\n  \"Overview\",\n  \"Integration\",\n  \"Billing\",\n  \"Transactions\",\n  \"plans\",\n];\n  \n  return <Tabs.Root\n    className=\"max-w-screen-xl mx-auto px-4 md:px-8\"\n    defaultValue=\"Overview\"\n  >\n    <Tabs.List\n      className=\"w-full border-b flex items-center gap-x-3 overflow-x-auto text-sm\"\n      aria-label=\"Manage your account\"\n    >\n      {tabItems.map((item, idx) => (\n        <Tabs.Trigger\n          key={idx}\n          className=\"group outline-none py-1.5 border-b-2 border-white text-gray-500 data-[state=active]:border-indigo-600 data-[state=active]:text-indigo-600\"\n          value={item}\n        >\n          <div className=\"py-1.5 px-3 rounded-lg duration-150 group-hover:text-indigo-600 group-hover:bg-gray-50 group-active:bg-gray-100 font-medium\">\n            {item}\n          </div>\n        </Tabs.Trigger>\n      ))}\n    </Tabs.List>\n    {tabItems.map((item, idx) => (\n      <Tabs.Content key={idx} className=\"py-6\" value={item}>\n        <p className=\"text-xs leading-normal\">\n          This is <b>{item}</b> Tab\n        </p>\n      </Tabs.Content>\n    ))}\n  </Tabs.Root>\n}\n","react":{"jsxTail":[{"label":"App.jsx","code":"import * as Tabs from \"@radix-ui/react-tabs\";\n\nconst tabItems = [\n  \"Overview\",\n  \"Integration\",\n  \"Billing\",\n  \"Transactions\",\n  \"plans\",\n];\n\nexport default () => (\n  <Tabs.Root\n    className=\"max-w-screen-xl mx-auto px-4 md:px-8\"\n    defaultValue=\"Overview\"\n  >\n    <Tabs.List\n      className=\"w-full border-b flex items-center gap-x-3 overflow-x-auto text-sm\"\n      aria-label=\"Manage your account\"\n    >\n      {tabItems.map((item, idx) => (\n        <Tabs.Trigger\n          key={idx}\n          className=\"group outline-none py-1.5 border-b-2 border-white text-gray-500 data-[state=active]:border-indigo-600 data-[state=active]:text-indigo-600\"\n          value={item}\n        >\n          <div className=\"py-1.5 px-3 rounded-lg duration-150 group-hover:text-indigo-600 group-hover:bg-gray-50 group-active:bg-gray-100 font-medium\">\n            {item}\n          </div>\n        </Tabs.Trigger>\n      ))}\n    </Tabs.List>\n    {tabItems.map((item, idx) => (\n      <Tabs.Content key={idx} className=\"py-6\" value={item}>\n        <p className=\"text-xs leading-normal\">\n          This is <b>{item}</b> Tab\n        </p>\n      </Tabs.Content>\n    ))}\n  </Tabs.Root>\n);\n"}],"jsxCss":[]}}
slug: /tabs
id: 1c1a6481-98d0-4e66-b650-edec7e621082
created_at: 1
---

<FUIBasicTabs />