A project header with a row of tabs whose underline stretches like elastic: the leading edge races ahead and the trailing edge catches up. A ghost pill follows the pointer, counts sit in badges and the row scrolls with faded edges on phones.
npx shadcn@latest add https://hyperblur.dev/r/navbar-tabs-stretch.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/navbar-tabs-stretch.tsx.
import { NavbarTabsStretch } from "@/components/hyperblur/navbar-tabs-stretch"
<NavbarTabsStretch showBackdrop={false} onValueChange={setTab} />| Prop | Type | Default | Description |
|---|---|---|---|
| brand | string | "Northstar" | Product name next to the logo. Hidden on narrow screens. |
| tabs | { label: string; href: string; count?: number }[] | Overview, Deployments, Analytics, Logs, Storage, Integrations, Settings | Tabs in the second row. A count renders a badge. |
| value | number | Controlled index of the selected tab. Pair with onValueChange. | |
| defaultValue | number | 1 | Selected tab when uncontrolled. |
| onValueChange | (index: number) => void | Called on click and on arrow, Home and End keys. | |
| user | { name: string; initials?: string } | null | { name: "Mara Lindqvist", initials: "ML" } | Avatar on the right. Pass null to hide it. |
| onNew | () => void | Called by the New button. | |
| newLabel | string | "New" | Text of the New button. Only the plus icon shows on phones. |
| accent | string | "#2f7bff" | Glow under the indicator, selected count badge and focus rings. |
| showBackdrop | boolean | true | Render sample page content behind the navbar for previews. Turn it off in a real layout. |