Swipeable Tabs React component for Tailwind CSS v4

Add to a project

Requirements: React 19 and Tailwind CSS v4, in Next.js (App Router or Pages), Vite or React Router. Installation guide · Next.js setup · Vite setup

Swipeable Tabs is part of Pro, with 298 more Pro items: $8 a month or $150 once. 14-day refund before you download any Pro item. See plans

Usage

Import SwipeableTabs from @/components/ui/swipeable-tabs.

import { useState } from "react"
import { SwipeableTabs } from "@/components/ui/swipeable-tabs"

const CLIENTS = [
  { name: "Tech Solutions Inc.", city: "New York", status: "active" },
  { name: "Summit Logistics", city: "Boston", status: "active" },
  { name: "Greenleaf Pharmacy", city: "Portland", status: "overdue" },
  { name: "Bistro 21", city: "Chicago", status: "prospect" },
]

function List({ status }: { status?: string }) {
  const rows = CLIENTS.filter((c) => !status || c.status === status)
  return (
    <ul className="divide-y divide-foreground/10 px-4">
      {rows.map((c) => (
        <li key={c.name} className="flex min-h-14 flex-col justify-center">
          <span className="text-[15px] font-medium">{c.name}</span>
          <span className="text-[13px] text-muted-foreground">{c.city}</span>
        </li>
      ))}
    </ul>
  )
}

export function Clients() {
  const [tab, setTab] = useState("all")
  return (
    <div className="flex h-dvh flex-col">
      <SwipeableTabs
        value={tab}
        onValueChange={setTab}
        aria-label="Clients"
        options={[
          { value: "all", label: "All", badge: 4, content: <List /> },
          { value: "active", label: "Active", badge: 2, content: <List status="active" /> },
          { value: "overdue", label: "Overdue", badge: 1, content: <List status="overdue" /> },
          { value: "prospects", label: "Prospects", content: <List status="prospect" /> },
        ]}
      />
    </div>
  )
}

Props

• options*
  SwipeableTabsOption[]

  The tabs and their pages: { value, label, icon?, badge?, disabled?, content }. A number badge renders a small count (hidden at 0), any other node renders as is. A disabled tab is skipped by the arrows and a swipe never settles on it.

• value
  string

  The selected tab, controlled. A change that arrives mid-swipe is applied after the swipe settles.

• defaultValuedefault ""
  string

  The tab selected at first, uncontrolled. Empty selects the first enabled option.

• onValueChange
  (value: string) => void

  Fires when a swipe settles on a new page or a tab is pressed (or selected with the arrow keys).

• variantdefault "underline"
  "underline" | "pill" | "segmented"

  The W1 tabs looks: a 2px underline under the label, a tinted capsule, or a raised thumb in a tinted track. Each one stretches between tabs while you swipe.

• sizedefault "md"
  "sm" | "md" | "lg"

  Trigger height 32 / 40 / 48px with matching type and icons. On touch screens md grows to 44px and sm gets a 44px hit area.

• tonedefault "neutral"
  "neutral" | "brand" | "success" | "warning" | "danger" | "info"

  Color of the indicator, the active label and the active count badge. neutral is black in light mode and white in dark mode.

• colordefault ""
  string

  Any CSS color for the indicator and the active label. Replaces the tone; leave empty to use it.

• radiusdefault "md"
  "none" | "sm" | "md" | "lg" | "full"

  Corner shape of the pill and the segmented track and thumb. Scales with the size; full makes capsules.

• fullWidthdefault true
  boolean

  Tabs fill the row, the phone pattern: pills and segments in equal cells, underline labels evenly spaced. Off, they size to their labels and the row scrolls sideways with edge fades when they overflow.

• layoutdefault "fill"
  "fill" | "auto"

  fill: the tabs fill their parent's height and every page is its own vertical scroller that keeps its scroll position, like an app screen. auto: pages take their content height and the tabs are as tall as the tallest page (settings sections, short forms).

• swipedefault true
  boolean

  Off: tabs only, the pages swap with a short fade like W1 tabs and the indicator springs between tabs.

• swipeWithMousedefault false
  boolean

  A mouse drag swipes the pages too. Off by default so dragging over text still selects it; touch and trackpads always swipe.

• lazydefault true
  boolean

  A page mounts the first time it is active or next to the active one, so the neighbour is ready before you swipe to it.

• keepMounteddefault true
  boolean

  Visited pages stay mounted and keep their scroll position and what was typed. Off, pages more than one page away unmount after a swipe settles.

• scrollToTopOnReselectdefault true
  boolean

  Tapping the active tab scrolls its page back to the top (layout="fill").

• activationModedefault "automatic"
  "automatic" | "manual"

  automatic: the arrow keys select as they move. manual: the arrows only move focus and Enter or Space selects.

• hapticsdefault true
  boolean

  A "selection" tick through lib/haptics when a swipe settles on a new tab. Never on taps, keys or mount.

• aria-labeldefault "Tabs"
  string

  Names the tab list for screen readers. Pass aria-labelledby instead when a visible heading names it.

• labels
  Partial<SwipeableTabsLabels>

  Strings read to screen readers: { swipeHint } describes the gesture on the tab list while swiping is on. The English default is "Swipe the content left or right to switch tabs."

• classNames
  Partial<Record<"list" | "trigger" | "icon" | "label" | "badge" | "indicator" | "panels" | "panel", string>>

  Extra classes for the inner parts, e.g. { list: "px-4" } to inset pills from the screen edge.

• className
  string

  Extra classes for the root, merged last. Override the tone vars here, e.g. [--tone:var(--info)].

Parts

FAQ

Used in

More React mobile components