# Mobile tab bar (goodtabs UI)

A bottom bar for phones with up to five icon and label links and a count badge.

## Install

```bash
npx shadcn@latest add https://ui.goodtabs.co/r/mobile-tab-bar.json
```

Or, with the @goodtabs namespace configured in components.json: `npx shadcn@latest add @goodtabs/mobile-tab-bar`

## Usage

```tsx
import { MobileTabBar } from "@/components/ui/mobile-tab-bar"
import { HomeIcon, SearchIcon, UserIcon } from "lucide-react"

<MobileTabBar
  position="fixed"
  className="md:hidden"
  items={[
    { label: "Home", href: "/", icon: <HomeIcon />, active: true },
    { label: "Search", href: "/search", icon: <SearchIcon /> },
    { label: "You", href: "/me", icon: <UserIcon />, badge: 2 },
  ]}
/>
```

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| items | `{ label: string; href: string; icon: ReactNode; active?: boolean; badge?: number | string }[]` |  | Up to five links. Extra items are dropped. |
| position | `"fixed" | "static"` | `"static"` | fixed pins it to the bottom of the viewport; static keeps it in flow. |

## When to use

- The three to five top-level places in an app, on phone widths
- When people switch between those places often and need one tap to get there
- With a count badge for an inbox or notifications

## When not to use

- On desktop: hide it from md up and use a sidebar or navbar
- For more than five destinations: put the rest behind a More page
- For actions like compose or upload: use a button, not a tab

## Notes for agents

- Server component. Links use next/link, so pass real hrefs and set active from the pathname yourself
- position defaults to static so it stays inside demos; pass position="fixed" with className="md:hidden" in an app and add pb-14 to the page
- It pads the bottom with env(safe-area-inset-bottom); set viewport-fit=cover in the viewport meta for that to apply
- Icons inherit currentColor and are sized to 20px; mark them aria-hidden, the label is the accessible name

Docs: https://ui.goodtabs.co/components/mobile-tab-bar