120k
New

Tabs

PreviousNext

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

Installation

pnpm dlx shadcn@latest add @force-ui-vue/tabs

Usage

<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>

Examples

Line

Use the variant="line" prop on TabsList for a line style.

Vertical

Use orientation="vertical" for vertical tabs.

Disabled

Icons

RTL

To enable RTL support in Force UI, see the RTL configuration guide.

API Reference

See the Radix Tabs documentation.