Tab Bar
A mobile bottom navigation where a shared-element blob slides under the active tab, the icon gives a haptic-style pop, and the label reveals on selection.
Home · Your daily overview
Installation
pnpm dlx shadcn@latest add "https://godui.design/r/tab-bar.json"Usage
tsx
import { TabBar } from "@/components/godui/tab-bar";tsx
const [tab, setTab] = useState("home");
<TabBar tabs={tabs} value={tab} onChange={setTab} safeArea />;Pass safeArea to add bottom safe-area padding for devices with a home indicator.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
tabs | TabBarTab[] | — | { value, label, icon, badge? } |
value | string | — | Controlled active tab |
defaultValue | string | first tab | Uncontrolled initial tab |
labelsOnActiveOnly | boolean | true | Reveal the label only on the active tab |
safeArea | boolean | false | Add bottom safe-area padding |
onChange | (value: string) => void | — | Called when the active tab changes |