A documentation header whose underline crawls between links like an inchworm: the leading edge moves first and the trailing edge catches up. On narrow screens the links become a scrollable tab strip that keeps the same underline.
npx shadcn@latest add https://hyperblur.dev/r/navbar-morph-underline.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/navbar-morph-underline.tsx.
import { NavbarMorphUnderline } from "@/components/hyperblur/navbar-morph-underline"
<NavbarMorphUnderline appearance="dark" showBackdrop={false} />| Prop | Type | Default | Description |
|---|---|---|---|
| brand | string | "Fieldnote" | Product name next to the mark. |
| links | { label: string; href: string; count?: number }[] | Guides, API reference, Changelog, Examples, Community | Links in the track. A count renders a small monospace pill. |
| active | number | Controlled index of the current link. Pair with onActiveChange. | |
| defaultActive | number | 0 | Current link index when uncontrolled. |
| onActiveChange | (index: number) => void | Called when a link is clicked. | |
| cta | { label: string; href: string } | null | { label: "Get API key", href: "#" } | Solid button on the right. Pass null to hide it. |
| appearance | "light" | "dark" | "light" | Paper light or near-black dark palette. |
| accent | string | "#e5484d" | Color the underline takes when it rests on the current link, plus count pills and focus rings. |
| showBackdrop | boolean | true | Render a sample page under the bar for previews. Turn it off in a real layout. |