Tabs

A set of layered sections of content—known as tab panels—that are displayed one at a time.

Component Source API Reference

Account

Make changes to your account here. Click save when you're done.

Installation ​

pnpm dlx shadcn-vue@latest add tabs

Usage ​

vue
<script setup lang="ts"> import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs' </script>  <template>  <Tabs default-value="account" class="w-[400px]">  <TabsList>  <TabsTrigger value="account">  Account  </TabsTrigger>  <TabsTrigger value="password">  Password  </TabsTrigger>  </TabsList>  <TabsContent value="account">  Make changes to your account here.  </TabsContent>  <TabsContent value="password">  Change your password here.  </TabsContent>  </Tabs> </template>

Examples ​

Vertical ​

Account

Make changes to your account here. Click save when you're done.

Edit this page on GitHub