Component
TabBar
TabBar provides touch-sized app navigation for three to five destinations without coupling the component to Next.js or React Router.
Preview
Installation
pnpm dlx shadcn@latest add https://pwaui.com/r/tab-bar.jsonUsage
import { Home, Search, User } from "lucide-react"import { TabBar } from "@/components/ui/tab-bar"
export function Navigation() { return ( <TabBar> <TabBar.Item icon={<Home />} label="Home" active /> <TabBar.Item icon={<Search />} label="Search" badge={3} /> <TabBar.Item icon={<User />} label="Profile" href="/profile" /> </TabBar> )}Anatomy
TabBarTabBar.ItemBehavior notes
- Inside AppShell, place TabBar within AppShell.Footer.
- Items render buttons by default and anchors when href is supplied.
- Active items expose aria-current=page.
- Use three to five stable application destinations.
Accessibility
Every item requires a visible label. Badges remain part of the accessible name and should be concise.