Tabs

Installation

npx shadcn@latest add @fujin/tabs

Usage

import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"

<Tabs defaultValue="account">
  <TabsList>
    <TabsTrigger value="account">Account</TabsTrigger>
    <TabsTrigger value="password">Password</TabsTrigger>
  </TabsList>
  <TabsContent value="account">...</TabsContent>
  <TabsContent value="password">...</TabsContent>
</Tabs>

Line variant and vertical tabs

<Tabs defaultValue="overview" orientation="vertical">
  <TabsList variant="line" indicator>
    ...
  </TabsList>
  ...
</Tabs>

orientation="vertical" lays the list out as a column and switches arrow-key navigation to Up/Down.

Animated indicator

Pass indicator to TabsList to slide one highlight between tabs (Base UI's Tabs.Indicator) instead of restyling the active tab. It is rendered before hydration, so the active tab is marked on the server-rendered page too.

Tabs as links

For route-based tabs, render each trigger as a link and drive value from the current path:

<Tabs value={pathname}>
  <TabsList variant="line">
    <TabsTrigger
      value="/settings"
      nativeButton={false}
      render={<Link href="/settings" />}
    >
      General
    </TabsTrigger>
  </TabsList>
</Tabs>

What's different from shadcn/ui

• indicator adds an animated highlight, built on Base UI's Tabs.Indicator.
• Triggers are at least 28px tall and use a solid focus ring (WCAG 2.5.8, 1.4.11).
• Arrow keys move focus; Enter or Space activates. Pass activateOnFocus to TabsList to activate on arrow keys instead.

API Reference

Every other prop is forwarded to the Base UI Tabs.