A mobile bottom bar with a notch cut into the plate that slides to the selected tab, where the icon pops up into a floating accent bubble. Badges, a dot state, arrow keys and safe-area spacing are built in.
npx shadcn@latest add https://hyperblur.dev/r/navbar-bottom-notch.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/navbar-bottom-notch.tsx.
import { NavbarBottomNotch } from "@/components/hyperblur/navbar-bottom-notch"
<NavbarBottomNotch showBackdrop={false} value={tab} onValueChange={setTab} />| Prop | Type | Default | Description |
|---|---|---|---|
| tabs | { label: string; href?: string; icon?: string | ReactNode; badge?: number | boolean }[] | Home, Explore, Inbox, Saved, Profile | Tabs from left to right. Built-in icons: home, explore, inbox, saved, profile, cart, calendar, chart; any node works too. A badge of true renders a dot. |
| value | number | Controlled index of the selected tab. Pair with onValueChange. | |
| defaultValue | number | 0 | Selected tab when uncontrolled. |
| onValueChange | (index: number) => void | Called when a tab is chosen. | |
| fixed | boolean | true | Pin the bar to the bottom of the viewport when showBackdrop is false. |
| accent | string | "#34d399" | Color of the floating bubble and its glow. |
| showBackdrop | boolean | true | Show the bar inside a phone with sample screens that change with the tab. Turn it off in a real app. |