Skip to content

shadcn.io is an independent project built on shadcn/ui

Free

Scrollable Tabs for Vue

January through December in one scrolling row of tabs. January is selected and shows Total Tasks 24 and Completed 18.

UI library: Ark UI

Twelve month names sit on one line that scrolls sideways. January is selected. Its panel is titled January 2024 and shows Total Tasks 24 and Completed 18.

Use a scrolling row for a long run of tabs that should stay on one line, such as months. An Accordion lists the same months in a stack. Ark UI in Vue does not supply the month names or the counts.

Preview

Preview width

Installation

MCP · Pro
Make your AI a shadcn expert
Your agent installs components, builds pages and restyles your app from one prompt, in Claude Code, Cursor or VS Code.
Get MCPSee plans
Part of Pro

Anatomy

Tabs anatomy: root, list, indicator, trigger, content

Usage

<Tabs class="w-full max-w-md" defaultValue="january">
  <ScrollArea class="w-full whitespace-nowrap rounded-md">
    <TabsList>
      <TabsTrigger
        v-for="month in months"
        :key="month.name"
        :value="month.name.toLowerCase()"
      >
        {{ month.name }}
      </TabsTrigger>
    </TabsList>
  </ScrollArea>
  <TabsContent
    v-for="month in months"
    :key="month.name"
    :value="month.name.toLowerCase()"
  >
    <div class="rounded-lg border bg-card p-6 text-card-foreground shadow-sm">
      <h3 class="mb-2 font-semibold text-lg">{{ month.name }} 2024</h3>
      <p class="text-muted-foreground text-sm">
        View statistics and activity for {{ month.name }}. Track your progress, goals, and achievements throughout the month.
      </p>
      <div class="mt-4 grid grid-cols-2 gap-4">
        <div class="rounded-md border p-3">
          <p class="text-muted-foreground text-xs">Total Tasks</p>
          <p class="mt-1 font-semibold text-2xl tabular-nums">{{ month.total }}</p>
        </div>
        <div class="rounded-md border p-3">
          <p class="text-muted-foreground text-xs">Completed</p>
          <p class="mt-1 font-semibold text-2xl tabular-nums">
            {{ month.completed }}
<!-- The rest of the file is under Installation. -->

FAQ

How does the tab list scroll?

ScrollArea wraps TabsList with w-full whitespace-nowrap. The list keeps its natural width, so January to December overflow the max-w-md area and scroll. ScrollArea draws its own horizontal scrollbar.

How are the twelve months built?

A months array is mapped twice, once for triggers and once for panels. Each value is the lowercased month name, and the default is january.

Does each month get a panel?

Yes. Each panel shows the month and 2024, a muted paragraph and two stat boxes, Total Tasks and Completed.

Where do the task counts come from?

From the months array: each month has its own total and completed. The numbers are fixed, so they match between server and client renders and stay the same when you come back to a month.

Do the arrow keys move between months?

Yes. Left and Right move between the month triggers, and Home and End jump to January and December. Focusing a month selects it. Set activationMode="manual" to select only with Enter or Space.

Do the other months stay mounted?

No. Only the selected month's panel is in the page. Set lazyMount and unmountOnExit to false on Tabs to keep every month mounted.

API Reference

Tabs

Sets defaultValue="january", v-for="month in months", key="month.name" and value="month.name.toLowerCase()". The rest is on the Tabs page.

Scroll Area

No extra props in this demo. The rest is on the Scroll Area page.

All 11 tabs examples