Fanvue API Documentation

import {
  Tabs,
  TabsContent,
  TabsList,
  TabsOverflow,
  TabsOverflowItem,
  TabsTrigger,
} from "@fanvue/ui";
import type {
  TabsContentProps,
  TabsListAppearance,
  TabsListPillSize,
  TabsListProps,
  TabsOverflowItemProps,
  TabsOverflowProps,
  TabsProps,
  TabsTriggerProps,
} from "@fanvue/ui";

Examples

Default

import { Tabs, TabsContent, TabsList, TabsTrigger } from "@fanvue/ui";

<Tabs defaultValue="tab1">
  <TabsList>
    <TabsTrigger value="tab1">Photos</TabsTrigger>
    <TabsTrigger value="tab2">Videos</TabsTrigger>
    <TabsTrigger value="tab3">Posts</TabsTrigger>
  </TabsList>
  <TabsContent value="tab1">
    <p className="pt-4 text-content-tertiary text-sm">Photos content</p>
  </TabsContent>
  <TabsContent value="tab2">
    <p className="pt-4 text-content-tertiary text-sm">Videos content</p>
  </TabsContent>
  <TabsContent value="tab3">
    <p className="pt-4 text-content-tertiary text-sm">Posts content</p>
  </TabsContent>
</Tabs>

Hug (sizes to content — does not stretch)

import { Tabs, TabsContent, TabsList, TabsTrigger } from "@fanvue/ui";

<div style={{ width: 400 }}>
  <Tabs defaultValue="tab1">
    <TabsList variant="hug">
      <TabsTrigger value="tab1">Photos</TabsTrigger>
      <TabsTrigger value="tab2">Videos</TabsTrigger>
      <TabsTrigger value="tab3">Posts</TabsTrigger>
    </TabsList>
    <TabsContent value="tab1">
      <p className="pt-4 text-content-tertiary text-sm">
        List is only as wide as its tabs — not 400 px
      </p>
    </TabsContent>
    <TabsContent value="tab2">
      <p className="pt-4 text-content-tertiary text-sm">Videos content</p>
    </TabsContent>
    <TabsContent value="tab3">
      <p className="pt-4 text-content-tertiary text-sm">Posts content</p>
    </TabsContent>
  </Tabs>
</div>

With Disabled Tab

import { Tabs, TabsContent, TabsList, TabsTrigger } from "@fanvue/ui";

<Tabs defaultValue="tab1">
  <TabsList>
    <TabsTrigger value="tab1">Active</TabsTrigger>
    <TabsTrigger value="tab2">Normal</TabsTrigger>
    <TabsTrigger value="tab3" disabled>
      Disabled
    </TabsTrigger>
  </TabsList>
  <TabsContent value="tab1">
    <p className="pt-4 text-content-tertiary text-sm">Active tab content</p>
  </TabsContent>
  <TabsContent value="tab2">
    <p className="pt-4 text-content-tertiary text-sm">Normal tab content</p>
  </TabsContent>
</Tabs>

Scrollable - Narrow Container

import { Tabs, TabsContent, TabsList, TabsTrigger } from "@fanvue/ui";

<div className="w-[320px]">
  <Tabs defaultValue="tab1">
    <TabsList scrollable flushLeft>
      <TabsTrigger value="tab1">Manager Insights</TabsTrigger>
      <TabsTrigger value="tab2">Chatter Leaderboard</TabsTrigger>
      <TabsTrigger value="tab3">Fans at Risk</TabsTrigger>
    </TabsList>
    <TabsContent value="tab1">
      <p className="pt-4 text-content-tertiary text-sm">
        Drag the row sideways to reach the later tabs.
      </p>
    </TabsContent>
    <TabsContent value="tab2">
      <p className="pt-4 text-content-tertiary text-sm">Chatter Leaderboard content</p>
    </TabsContent>
    <TabsContent value="tab3">
      <p className="pt-4 text-content-tertiary text-sm">Fans at Risk content</p>
    </TabsContent>
  </Tabs>
</div>

All States (Matrix)

import { Tabs, TabsList, TabsTrigger } from "@fanvue/ui";

<div className="flex flex-col gap-8">
  <div>
    <p className="typography-body-small-14px-semibold mb-4 text-content-tertiary">Active</p>
    <div className="flex gap-10">
      <div className="flex flex-col items-center gap-2">
        <p className="typography-description-12px-regular text-content-tertiary">Default</p>
        <Tabs defaultValue="t">
          <TabsList>
            <TabsTrigger value="t">Tab</TabsTrigger>
          </TabsList>
        </Tabs>
      </div>
      <div className="flex flex-col items-center gap-2">
        <p className="typography-description-12px-regular text-content-tertiary">Disabled</p>
        <Tabs defaultValue="t">
          <TabsList>
            <TabsTrigger value="t" disabled>
              Tab
            </TabsTrigger>
          </TabsList>
        </Tabs>
      </div>
    </div>
  </div>
  <div>
    <p className="typography-body-small-14px-semibold mb-4 text-content-tertiary">Inactive</p>
    <div className="flex gap-10">
      <div className="flex flex-col items-center gap-2">
        <p className="typography-description-12px-regular text-content-tertiary">Default</p>
        <Tabs defaultValue="other">
          <TabsList>
            <TabsTrigger value="t">Tab</TabsTrigger>
          </TabsList>
        </Tabs>
      </div>
      <div className="flex flex-col items-center gap-2">
        <p className="typography-description-12px-regular text-content-tertiary">Disabled</p>
        <Tabs defaultValue="other">
          <TabsList>
            <TabsTrigger value="t" disabled>
              Tab
            </TabsTrigger>
          </TabsList>
        </Tabs>
      </div>
    </div>
  </div>
</div>

Props

Tabs

boolean

TabsContent

Renders the content panel for a given tab value. Only visible when its value matches the active tab.

boolean

TabsList

Container for TabsTrigger elements. Renders a sliding active-tab indicator that animates between tabs.

boolean | Breakpoint

Controls tab alignment within a full-width container.

false (default): tabs spread evenly
true: tabs left-aligned, sized to content
"md" (breakpoint): spread on mobile, left-aligned at breakpoint and up

"pill" | "underline"

default:"underline"

"underline" marks the active tab with a line under the row. "pill" sits the tabs in a rounded track, sized to its tabs, and slides a filled pill behind the active one. A pill list is horizontal and ignores fullWidth, alignLeft, variant and flushLeft; it scrolls when it doesn’t fit.

boolean

default:"false"

Drops the leading padding on the first tab so its label sits flush with the list’s left edge, lining it up with page content above or below the bar (a heading, for instance) rather than being indented by the tab’s own padding. Spacing between tabs is unaffected. Pair with alignLeft or variant="hug".

boolean

default:"false"

Pill only: the pill follows the mouse across the tabs and settles back on the selected one when the pointer leaves. Mouse only, and off when the user prefers reduced motion.

boolean

default:"true"

When true (the default), the tab list spans the full width of its container and each tab grows equally. Set to false for inline sizing.

boolean

default:"false"

Scrolls the row horizontally when the tabs don’t fit, instead of letting them compress. By default a tab may shrink until its label ellipsises, which on a narrow viewport can truncate every label at once; here each tab keeps its natural width and the overflow scrolls. The scrollbar itself is hidden — the clipped tab at the edge is the affordance.Because the tabs are content-sized, they no longer spread to fill the row: a set that does fit sits left-aligned, as with alignLeft.Horizontal orientation only: a vertical list already grows downwards.

"32" | "36"

default:"32"

Height of each tab in a pill list. Ignored by the underline appearance.

"fill" | "hug"

Explicit layout variant. "hug" sizes the list to its content; "fill" stretches it full-width with equal-width tabs. Takes precedence over fullWidth/alignLeft.

TabsOverflow

The last tab in a TabsList, opening a menu of the tabs that don’t fit the row. It sits in the row’s arrow-key order, opens with click, Enter, Space or ArrowDown, and never selects anything itself. While one of its items is active it shows that item’s label and is the selected tab. Reads and sets the value of the surrounding Tabs, controlled or not. Renders nothing when it has no items.

ReactNode

required

Text shown on the tab while none of its items is active, e.g. “More”.

ReactNode

TabsOverflowItem elements, one per tab that doesn’t fit the row.

TabsOverflowItem

A tab listed in a TabsOverflow menu. The active one takes the menu’s selected style and is announced as the checked option.

string

required

The tab’s value, as on a TabsTrigger.

boolean

ReactNode

Leading avatar rendered in place of DropdownMenuItemProps.leadingIcon, for rows that represent a person or account. Pass an Avatar sized to 24. Takes precedence over leadingIcon.

ReactNode

Trailing count or number (e.g. an unread total) rendered before DropdownMenuItemProps.trailingIcon.

ReactNode

Optional secondary text rendered on a second line below the label. When provided, the row switches to a two-line layout and the leading/trailing icons align to the title line (top) rather than the row’s vertical centre.

boolean

default:"false"

Applies the destructive (error) treatment. Use for irreversible actions.

ReactNode

Icon (or other node) rendered before the label. Ignored when DropdownMenuItemProps.avatar is set.

"32" | "40" | "md" | "sm"

default:"40"

Height of the menu item row.

ReactNode

Icon (or other node) rendered after the label.

TabsTrigger

An interactive tab that activates its associated TabsContent panel. Renders a <button> by default. Pass asChild to render the tab as another element — e.g. a router link for navigation tabs (<TabsTrigger asChild><Link href="…">…</Link></TabsTrigger>). With asChild the child element becomes the tab itself (receiving role="tab" and focus management), so the tab stays a single interactive control rather than nesting one inside the other. Inside a TabsList appearance="pill" the tab takes the pill styling.

boolean

Exported types

Also exported from @fanvue/ui: TabsContentProps, TabsListAppearance, TabsListPillSize, TabsListProps, TabsOverflowItemProps, TabsOverflowProps, TabsProps, TabsTriggerProps.

Setup: Installation · Theming

Getting Started

Actions

Forms & Inputs

Overlays & Dialogs

Navigation

Data Display

Feedback & Status

Layout

Media & Audio

Creator & Social

Charts

Icons & Flags

Utility

Tabs

Examples

Default

Hug (sizes to content — does not stretch)

With Disabled Tab

Scrollable - Narrow Container

All States (Matrix)

Props

Tabs

TabsContent

TabsList

TabsOverflow

TabsOverflowItem

TabsTrigger

Exported types

​Examples

​Default

​Hug (sizes to content — does not stretch)

​With Disabled Tab

​Scrollable - Narrow Container

​All States (Matrix)

​Props

​Tabs

​TabsContent

​TabsList

​TabsOverflow

​TabsOverflowItem

​TabsTrigger

​Exported types

Examples

Default

Hug (sizes to content — does not stretch)

With Disabled Tab

Scrollable - Narrow Container

All States (Matrix)

Props

Tabs

TabsContent

TabsList

TabsOverflow

TabsOverflowItem

TabsTrigger

Exported types