A mobile bottom tab bar with a glowing blob that springs and squashes to the active tab, count and dot badges, and arrow key support. The preview shows it inside a phone whose screens slide with the selection.
npx shadcn@latest add https://hyperblur.dev/r/nav-tab-bar.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/nav-tab-bar.tsx.
import { NavTabBar } from "@/components/hyperblur/nav-tab-bar"
<NavTabBar showBackdrop={false} onValueChange={(i) => setTab(i)} />| Prop | Type | Default | Description |
|---|---|---|---|
| tabs | NavTabBarTab[] | Home, Explore, Inbox, Activity, Profile | Tabs with label, icon (home, explore, inbox, activity, profile, plus, calendar, bag), optional badge (a number or true for a dot) and optional href. |
| value | number | Controlled active index. Pair with onValueChange. | |
| defaultValue | number | 0 | Active index when uncontrolled. |
| onValueChange | (index: number, tab: NavTabBarTab) => void | Called when a tab is chosen by click or arrow keys. | |
| showLabels | boolean | true | Show text under each icon. Labels stay available to screen readers when hidden. |
| accent | string | "#22d3ee" | Color of the blob, its dot and the focus ring. |
| showBackdrop | boolean | true | Render the phone mockup with sliding screens for previews. Turn it off to get only the bar. |