Bottom tab bar with icons, labels, badges and safe-area handling.
npx shadcn@latest add @lokalhost/navigation-barThe source is copied to components/ui/tab-bar.tsx — it’s yours to edit.
import { TabBar, type TabBarItem } from "@/components/ui/tab-bar";
<TabBar items={ITEMS} active={active} onChange={setActive} />| Prop | Type | Default | Description |
|---|---|---|---|
itemsrequired | { key: string; label: string; icon: IoniconName; badge?: number }[] | — | Tabs to render. |
activerequired | string | — | Key of the active tab. |
onChangerequired | (key: string) => void | — | Called with the pressed tab key. |