StorybookGitHub

Tabs

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

Make changes to your account here.

Installation 

npx shadcn-vue@latest add https://vuedocs.canceydejean.dev/r/tabs.json

Usage

Use for switching between related views. Matches tab value to panel value.

<script setup lang="ts">
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
</script>

<template>
  <Tabs default-value="account">
    <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>

Set TabsList variant to line for an underline style. Pass orientation="vertical" on Tabs for a vertical list. Built on reka-ui's Tabs primitive.