Tabs

Shows a tab component.

Examples

Basic tabs

Account content

Code

<template>
  <Tabs class="w-[400px]" default-value="account">
    <TabsContent value="account" title="Account">
      <div class="bg-white dark:bg-gray-800 rounded border text-sm border-dashed p-10 text-center flex items-center justify-center">
        Account content
      </div>
    </TabsContent>
    <TabsContent
      v-for="{ title, value } in [{title: 'User', value: 'user'}, {title: 'Company', value: 'company'}]"
      :key="value"
      :value="value"
      :title="title"
    >
      <div class="bg-white dark:bg-gray-800 rounded border text-sm border-dashed p-10 text-center flex items-center justify-center">
        {{ title }} content
      </div>
    </TabsContent>
  </Tabs>
</template>
<script setup lang="ts">
import { Tabs, TabsContent } from '@/components/ui/tabs'
</script>

Tabs with icons

Account content

Code

<template>
  <TooltipProvider :delay-duration="100">
    <Tabs class="w-64" default-value="account">
      <TabsContent value="account" tooltip="Account" icon="calendar">
        <div class="bg-white dark:bg-gray-800 rounded border text-sm border-dashed p-10 text-center flex items-center justify-center">
          Account content
        </div>
      </TabsContent>
      <TabsContent value="user" tooltip="User" icon="user">
        <div class="bg-white dark:bg-gray-800 rounded border text-sm border-dashed p-10 text-center flex items-center justify-center">
          User content
        </div>
      </TabsContent>
    </Tabs>
  </TooltipProvider>
</template>
<script setup lang="ts">
import { Tabs, TabsContent } from '@/components/ui/tabs'
import { TooltipProvider } from '@/components/ui/tooltip'
</script>

Vertical tabs

Account content

Code

<template>
  <Tabs class="w-64" default-value="account" orientation="vertical">
    <TabsContent value="account" title="Account">
      <div class="bg-white dark:bg-gray-800 h-full rounded border text-sm border-dashed p-10 text-center flex items-center justify-center">
        Account content
      </div>
    </TabsContent>
    <TabsContent value="user" title="User">
      <div class="bg-white dark:bg-gray-800 h-full rounded border text-sm border-dashed p-10 text-center flex items-center justify-center">
        User content
      </div>
    </TabsContent>
    <TabsContent value="other" title="Other">
      <div class="bg-white dark:bg-gray-800 h-full rounded border text-sm border-dashed p-10 text-center flex items-center justify-center">
        Other content
      </div>
    </TabsContent>
    <TabsContent value="settings" title="Settings">
      <div class="bg-white dark:bg-gray-800 h-full rounded border text-sm border-dashed p-10 text-center flex items-center justify-center">
        Settings content
      </div>
    </TabsContent>
    <TabsContent value="more" title="More">
      <div class="bg-white dark:bg-gray-800 h-full rounded border text-sm border-dashed p-10 text-center flex items-center justify-center">
        More content
      </div>
    </TabsContent>
  </Tabs>
</template>
<script setup lang="ts">
import { Tabs, TabsContent } from '@/components/ui/tabs'
</script>

Tabs controlled by v-model

Tab is account

Code

<template>
  <Tabs v-model="tab" class="w-64">
    <TabsContent value="account" title="Account">
      <div class="bg-white dark:bg-gray-800 rounded border text-sm border-dashed p-10 text-center flex items-center justify-center">
        Tab is {{ tab }}
      </div>
    </TabsContent>
    <TabsContent value="user" title="User">
      <div class="bg-white dark:bg-gray-800 rounded border text-sm border-dashed p-10 text-center flex items-center justify-center">
        Tab is {{ tab }}
      </div>
    </TabsContent>
  </Tabs>
</template>
<script setup lang="ts">
import { Tabs, TabsContent } from '@/components/ui/tabs'
import { ref } from 'vue'

const tab = ref('account')
</script>