Bubble Tabbar

Install

Or by hand, in a Next.js project with shadcn set up. It writes components/pastetaste/bubble-tabbar.tsx.

Install the pastetaste component "Bubble Tabbar" (bubble-tabbar) into this Next.js project and use it.

What it is: Floating tab bar whose active item sits in a bubble that travels and stretches between tabs on two springs, with exact label colours inside the bubble and dot or count badges.

Before you place it, ask me (one short message, in my language; "skip" = sensible default): which page and section it goes in, my brand colour (hex), the text, labels or images it should show, and whether I want my logo or my own copy in the demo content. Then:

Steps:
1. If the project has no components.json, run: npx shadcn@latest init -y -d. Then run: npx shadcn@latest add https://pastetaste.com/r/bubble-tabbar.json
   (it writes components/pastetaste/bubble-tabbar.tsx; install any npm packages it reports: motion@^12.23.0).
2. Import it: import { BubbleTabbar } from "@/components/pastetaste/bubble-tabbar" (check the file for the exact named export).
3. Put it where it fits on the page I name, keep the rest of the page untouched, and pass props for my colours instead of editing the installed file.
4. It does not depend on Tailwind; colours come from CSS variables (--pt-*) or props.
5. It supports prefers-reduced-motion with a still state; do not remove it.

Props (all optional unless the type has no default):
- items: { id: string; label: string; icon: ReactNode; href?: string; badge?: boolean | number }[] — Tabs in order. A boolean badge is a dot, a number is a count (hidden at 0, 99+ above 99). With href a tab renders as a link.
- value: string — Active tab id for controlled use.
- defaultValue: string = items[0].id — Starting tab id when uncontrolled.
- onChange: (id: string, item: BubbleTab) => void — Called when a different tab is chosen.
- tone: 'ink' | 'paper' = 'ink' — Black bar with a light bubble, or white bar with a dark bubble.
- size: 'md' | 'lg' = 'md' — Phone tab bar (54 px tabs) or desktop dock (68 px tabs with larger labels).
- accent: string = var(--pt-accent, #ff4a2e) — The one accent: badge colour and focus ring.
- speed: number = 1 — Spring pace; 2 is twice as quick.
- label: string = 'Primary' — Accessible name of the navigation landmark.

Live preview: https://pastetaste.com/c/bubble-tabbar
Then run the dev server, check it in the browser at desktop and mobile width, and tell me the page URL.

Props 9