Bottom Tab Bar 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

Bottom Tab Bar 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 BottomTabBar from @/components/ui/bottom-tab-bar.

"use client"

import { House, Inbox, Plus, UserRound, Users } from "lucide-react"
import { BottomTabBar, type BottomTabBarItem } from "@/components/ui/bottom-tab-bar"

const tabs: BottomTabBarItem[] = [
  { label: "Home", href: "/", icon: <House />, activeIcon: <House className="fill-current" /> },
  { label: "Clients", href: "/clients", icon: <Users />, activeIcon: <Users className="fill-current" /> },
  { label: "Inbox", href: "/inbox", icon: <Inbox />, badge: 4 },
  { label: "Profile", href: "/profile", icon: <UserRound />, activeIcon: <UserRound className="fill-current" /> },
]

export function MobileNav({ onCreate }: { onCreate: () => void }) {
  return (
    <BottomTabBar
      className="md:hidden"
      items={tabs}
      action={{ label: "Add", icon: <Plus />, onSelect: onCreate }}
      hideOnScroll
    />
  )
}

Props

• items*
  BottomTabBarItem[]

  3 to 5 tabs (a dev warning above 5). The shared NavItem shape: id, label, href, icon, activeIcon (shown while active, e.g. a filled glyph), badge (a number is a count, a node renders as is), disabled, match, onSelect; plus dot: true for an 8px dot instead of a count. Items without href are buttons.

• value
  string

  The active tab's key (navItemKey: id, else href, else the label). Controls the bar.

• defaultValue
  string

  The first active tab while uncontrolled and no current path is known. Default: the first enabled tab.

• onValueChange
  (key: string, item: BottomTabBarItem) => void

  Fires whenever another tab is activated, in every mode (controlled, router, uncontrolled).

• currentPathdefault ""
  string

  The current pathname. Empty: the LinkProvider's. With a path the router decides the active tab (the longest matching href) and clicks store nothing. Try /inbox or /clients/northwind-tech.

• action
  { label: string; icon: ReactNode; onSelect?: () => void; href?: string }

  The raised center button (Add, Compose, Scan), placed in the middle of the tabs (with 4 tabs: 2, action, 2). label becomes its aria-label; filled with the tone.

• variantdefault "bar"
  "bar" | "floating"

  bar: full width on the bottom edge with a glass surface and a hairline (iOS). floating: an inset glass pill above the safe area (iOS 26), the pill indicator behind the whole tab.

• indicatordefault "pill"
  "pill" | "line" | "dot" | "none"

  pill: a 56x32 tinted pill behind the icon (Material 3). line: a 2px bar on the top edge of the tab. dot: a 4px dot under the label. none: color only. Every one moves between tabs on a snappy spring.

• showLabelsdefault "always"
  "always" | "active" | "never"

  active: only the active tab shows its label and the others center their icon. never: icons only; the labels stay for screen readers and as tooltips.

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

  Bar height 56 / 64px, icons 22 / 24px, labels 10 / 11px. Both stay far above 44px targets.

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

  The active color (neutral: the foreground, with a gray pill) and the fill of the center action. Other tones tint the pill and the active label.

• colordefault ""
  string

  Any CSS color. Replaces the tone for the active tab and the action. Leave empty to use the tone.

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

  The fill of count badges and dots. Red by default: on every platform people read a red count as unread.

• badgeLabeldefault "unread"
  string

  Read by screen readers after a count: "Inbox, 4 unread". The visible badge is hidden from them.

• dotLabeldefault "new"
  string

  Read by screen readers after a dot: "Profile, new".

• aria-labeldefault "Primary"
  string

  The name of the <nav> landmark.

• hideOnScrolldefault false
  boolean

  Slides down while you scroll down, following the finger, and comes back on scroll up, at the end of the content and whenever focus is inside. Transform only, no re-render per frame.

• positiondefault "auto"
  "auto" | "fixed" | "sticky" | "static"

  auto: fixed to the viewport, or static inside an app shell whose content column scrolls. sticky: sticky bottom-0 as the last child of a scroll container (phone frames, demos). static: in the flow. Writes --bottom-bar-offset (on <html> when fixed, else on its parent) so floating buttons clear it.

• safeAreadefault true
  boolean

  Pads env(safe-area-inset-bottom) so the tabs clear the iPhone home indicator (the floating pill keeps at least 12px). It is 0 in desktop browsers.

• hapticsdefault true
  boolean

  A 10ms vibration on a tab change where the browser supports it (Android; iOS ignores it).

• scrollToTopOnReselectdefault true
  boolean

  Tapping the active tab scrolls its page to the top (iOS). On a nested page the tab first goes back to its root.

• onReselect
  (item: BottomTabBarItem) => void

  Runs when the active tab is tapped again (refresh a feed, focus a search).

• scrollTarget
  HTMLElement | Window | RefObject<HTMLElement | null> | null

  What scrolls, for hide on scroll and reselect. Default: the nearest ScrollContainerProvider, else the window.

• linkComponent
  (props: LinkComponentProps) => ReactNode

  The router link for this bar only (a component, or "a"). Usually set once for the app with LinkProvider.

• classNames
  Partial<Record<"inner" | "list" | "link" | "icon" | "label" | "indicator" | "action", string>>

  Extra classes for the inner parts: the bar surface, the list, each tab link, icon box, label, the indicator and the action.

• className
  string

  Extra classes for the <nav>, merged last. Set [--bar-bg:var(--surface)] when the bar sits on a surface other than the page.

Parts

FAQ

Used in

More React mobile components