---
title: Vertical Tabs without line
category: Application
paid: false
isActive: true
ltr: {"svelte":{"svelteTail":[]},"vue":{"vueTail":[{"label":"App.vue","code":"<template>\n  <TabsRoot v-model=\"selectedTab\" class=\"max-w-screen-xl mt-2 mx-auto px-4 md:px-8\" orientation=\"vertical\">\n    <TabsList class=\"hidden flex-col items-start gap-y-3 py-1 text-sm sm:flex\" aria-label=\"Manage your account\">\n      <TabsTrigger\n        v-for=\"(item, idx) in tabItems\"\n        :key=\"idx\"\n        class=\"data-[state=active]:bg-gray-100 data-[state=active]:text-gray-700 data-[state=active]:shadow-sm outline-gray-800 py-1.5 px-3 rounded-lg duration-150 text-gray-500 hover:text-gray-700 hover:bg-gray-100 active:bg-gray-100 font-medium\"\n        :value=\"item\"\n      >\n        {{ item }}\n      </TabsTrigger>\n    </TabsList>\n    <div class=\"relative text-gray-500 sm:hidden\">\n      <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 20 20\" fill=\"currentColor\" class=\"pointer-events-none w-5 h-5 absolute right-2 inset-y-0 my-auto\">\n        <path\n          fill-rule=\"evenodd\"\n          d=\"M5.23 7.21a.75.75 0 011.06.02L10 11.168l3.71-3.938a.75.75 0 111.08 1.04l-4.25 4.5a.75.75 0 01-1.08 0l-4.25-4.5a.75.75 0 01.02-1.06z\"\n          clip-rule=\"evenodd\"\n        />\n      </svg>\n      <select :value=\"selectedTab\" class=\"py-2 px-3 w-full bg-transparent appearance-none outline-none border rounded-lg shadow-sm focus:border-gray-800 text-sm\" @change=\"setSelectedTab\">\n        <option v-for=\"(item, idx) in tabItems\" :value=\"item\" :key=\"idx\">{{ item }}</option>\n      </select>\n    </div>\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>\nimport { ref } from \"vue\";\nimport { TabsRoot, TabsList, TabsTrigger, TabsContent } from \"radix-vue\";\n\nexport default {\n  components: {\n    TabsRoot,\n    TabsList,\n    TabsTrigger,\n    TabsContent,\n  },\n  setup() {\n    const selectedTab = ref(\"Overview\");\n\n    const tabItems = [\"Overview\", \"Integration\", \"Billing\", \"Transactions\", \"plans\"];\n\n    const setSelectedTab = (value) => {\n      selectedTab.value = value.target.value;\n    };\n\n    return {\n      selectedTab,\n      tabItems,\n      setSelectedTab,\n    };\n  },\n};\n</script>\n"}],"vueCss":[]},"preview":"function App() {\n  const [selectedTab, setSelectedTab] = useState(\"Overview\");\n\n  const tabItems = [\n    \"Overview\",\n    \"Integration\",\n    \"Billing\",\n    \"Transactions\",\n    \"plans\",\n  ];\n\n  return (\n    <Tabs.Root\n      className=\"max-w-screen-xl mt-2 mx-auto px-4 md:px-8\"\n      value={selectedTab}\n      orientation=\"vertical\"\n      onValueChange={(val) => setSelectedTab(val)}\n    >\n      <Tabs.List\n        className=\"hidden flex-col items-start gap-y-3 py-1 text-sm sm:flex\"\n        aria-label=\"Manage your account\"\n      >\n        {tabItems.map((item, idx) => (\n          <Tabs.Trigger\n            key={idx}\n            className=\"data-[state=active]:bg-gray-100 data-[state=active]:text-gray-700 data-[state=active]:shadow-sm outline-gray-800 py-1.5 px-3 rounded-lg duration-150 text-gray-500 hover:text-gray-700 hover:bg-gray-100 active:bg-gray-100 font-medium\"\n            value={item}\n          >\n            {item}\n          </Tabs.Trigger>\n        ))}\n      </Tabs.List>\n      <div className=\"relative text-gray-500 sm:hidden\">\n        <svg\n          xmlns=\"http://www.w3.org/2000/svg\"\n          viewBox=\"0 0 20 20\"\n          fill=\"currentColor\"\n          className=\"pointer-events-none w-5 h-5 absolute right-2 inset-y-0 my-auto\"\n        >\n          <path\n            fillRule=\"evenodd\"\n            d=\"M5.23 7.21a.75.75 0 011.06.02L10 11.168l3.71-3.938a.75.75 0 111.08 1.04l-4.25 4.5a.75.75 0 01-1.08 0l-4.25-4.5a.75.75 0 01.02-1.06z\"\n            clipRule=\"evenodd\"\n          />\n        </svg>\n        <select\n          value={selectedTab}\n          className=\"py-2 px-3 w-full bg-transparent appearance-none outline-none border rounded-lg shadow-sm focus:border-gray-800 text-sm\"\n          onChange={(e) => setSelectedTab(e.target.value)}\n        >\n          {tabItems.map((item, idx) => (\n            <option key={idx} idx={idx}>\n              {item}\n            </option>\n          ))}\n        </select>\n      </div>\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};\n","react":{"jsxTail":[{"code":"import * as Tabs from \"@radix-ui/react-tabs\";\nimport { useState } from \"react\";\n\nexport default () => {\n  const [selectedTab, setSelectedTab] = useState(\"Overview\");\n\n  const tabItems = [\n    \"Overview\",\n    \"Integration\",\n    \"Billing\",\n    \"Transactions\",\n    \"plans\",\n  ];\n\n  return (\n    <Tabs.Root\n      className=\"max-w-screen-xl mt-2 mx-auto px-4 md:px-8\"\n      value={selectedTab}\n      orientation=\"vertical\"\n      onValueChange={(val) => setSelectedTab(val)}\n    >\n      <Tabs.List\n        className=\"hidden flex-col items-start gap-y-3 py-1 text-sm sm:flex\"\n        aria-label=\"Manage your account\"\n      >\n        {tabItems.map((item, idx) => (\n          <Tabs.Trigger\n            key={idx}\n            className=\"data-[state=active]:bg-gray-100 data-[state=active]:text-gray-700 data-[state=active]:shadow-sm outline-gray-800 py-1.5 px-3 rounded-lg duration-150 text-gray-500 hover:text-gray-700 hover:bg-gray-100 active:bg-gray-100 font-medium\"\n            value={item}\n          >\n            {item}\n          </Tabs.Trigger>\n        ))}\n      </Tabs.List>\n      <div className=\"relative text-gray-500 sm:hidden\">\n        <svg\n          xmlns=\"http://www.w3.org/2000/svg\"\n          viewBox=\"0 0 20 20\"\n          fill=\"currentColor\"\n          className=\"pointer-events-none w-5 h-5 absolute right-2 inset-y-0 my-auto\"\n        >\n          <path\n            fillRule=\"evenodd\"\n            d=\"M5.23 7.21a.75.75 0 011.06.02L10 11.168l3.71-3.938a.75.75 0 111.08 1.04l-4.25 4.5a.75.75 0 01-1.08 0l-4.25-4.5a.75.75 0 01.02-1.06z\"\n            clipRule=\"evenodd\"\n          />\n        </svg>\n        <select\n          value={selectedTab}\n          className=\"py-2 px-3 w-full bg-transparent appearance-none outline-none border rounded-lg shadow-sm focus:border-gray-800 text-sm\"\n          onChange={(e) => setSelectedTab(e.target.value)}\n        >\n          {tabItems.map((item, idx) => (\n            <option key={idx} idx={idx}>\n              {item}\n            </option>\n          ))}\n        </select>\n      </div>\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};\n","label":"App.jsx"}],"jsxCss":[]},"html":{"htmlTail":[{"label":"index.html","code":"<div x-data=\"{ selectedTab: 'Overview' }\">\n  <div class=\"max-w-screen-xl mt-2 mx-auto px-4 md:px-8\">\n    <div\n      class=\"hidden flex-col items-start gap-y-3 py-1 text-sm sm:flex\"\n      aria-label=\"Manage your account\"\n    >\n      <template\n        x-for=\"(tabItem, index) in ['Overview', 'Integration', 'Billing', 'Transactions', 'plans']\"\n        :key=\"index\"\n      >\n        <button\n          :class=\"{'bg-gray-100 text-gray-700 shadow-sm': selectedTab === tabItem}\"\n          class=\"py-1.5 px-3 rounded-lg duration-150 text-gray-500 hover:text-gray-700 hover:bg-gray-100 active:bg-gray-100 font-medium\"\n          @click=\"selectedTab = tabItem\"\n          x-text=\"tabItem\"\n        ></button>\n      </template>\n    </div>\n    <div class=\"relative text-gray-500 sm:hidden\">\n      <svg\n        xmlns=\"http://www.w3.org/2000/svg\"\n        viewBox=\"0 0 20 20\"\n        fill=\"currentColor\"\n        class=\"pointer-events-none w-5 h-5 absolute right-2 inset-y-0 my-auto\"\n      >\n        <path\n          fill-rule=\"evenodd\"\n          d=\"M5.23 7.21a.75.75 0 011.06.02L10 11.168l3.71-3.938a.75.75 0 111.08 1.04l-4.25 4.5a.75.75 0 01-1.08 0l-4.25-4.5a.75.75 0 01.02-1.06z\"\n          clip-rule=\"evenodd\"\n        />\n      </svg>\n      <select\n        x-model=\"selectedTab\"\n        class=\"py-2 px-3 w-full bg-transparent appearance-none outline-none border rounded-lg shadow-sm focus:border-gray-800 text-sm\"\n      >\n        <template\n          x-for=\"(tabItem, index) in ['Overview', 'Integration', 'Billing', 'Transactions', 'plans']\"\n          :key=\"index\"\n        >\n          <option x-text=\"tabItem\"></option>\n        </template>\n      </select>\n    </div>\n    <template\n      x-for=\"(tabItem, index) in ['Overview', 'Integration', 'Billing', 'Transactions', 'plans']\"\n      :key=\"index\"\n    >\n      <div x-show=\"selectedTab === tabItem\" class=\"py-6\">\n        <p class=\"text-xs leading-normal\">\n          This is <strong x-text=\"tabItem\"></strong> Tab\n        </p>\n      </div>\n    </template>\n  </div>\n</div>"}]}}
slug: /tabs
id: 7e3ed4c0-55ff-466e-be88-47e5f52687cd
created_at: 1669586163034
---

<FUIVerticalTabsWithoutLine />