Tabs

Default

TabsList holds the triggers, each TabsContent renders the panel for its value. Pass default-value to pick the starting tab.

Usage

Import the parts you need from the component's folder.

import {
  Tabs,
  TabsList,
  TabsTrigger,
  TabsContent,
  TabsIndicator,
  TabsCarousel,
  TabsCarouselPanel,
  TabsSelectionIndicator,
  TabNav,
} from "@/components/ui/tabs";

Variants

Pill for compact pickers in a toolbar, segmented for equivalent groupings, underline for longer section navigation.

Underline

variant="underline" gives a transparent list with a sliding bottom border under the active trigger — the line style suited to page-level section navigation.

Sizes

Three heights: sm, md (default), and lg. Each follows the same ladder as Button — one step taller on phones, settling to its desktop height at the sm breakpoint.

With icons

Drop an Icon inside each trigger alongside the label.

Disabled trigger

Add disabled to a TabsTrigger to block it.

Overflow scroll

When triggers exceed the width, the list scrolls horizontally instead of wrapping.

Controlled

Drive the active tab from outside with v-model.

Swipe (mobile)

swipe enables left/right gestures to change tabs. Carousels, tables, and nested tablists are excluded automatically.

Swipeable carousel

swipeable turns the panels into a horizontal scroll-snap carousel built with TabsCarousel and TabsCarouselPanel. The active tab follows the scroll position and a scroll-driven TabsSelectionIndicator tracks your finger where supported (Chrome 125+), falling back to the sliding TabsIndicator elsewhere. This is separate from the swipe gesture prop.

Route tabs (TabNav)

TabNav is a sibling of Tabs for page-level navigation: each tab is a real NuxtLink route, so switching a tab changes the URL. Pass a tabs array of route descriptors. Use TabNav when tabs map to routes; use Tabs when they switch views inside one page without changing the URL.

API Reference

Accessibility

Keyboard shortcuts and ARIA behavior.