A pill navigation whose active indicator is a gooey blob. Three blobs with different timings stretch and merge through an SVG filter as the selection moves. Arrow keys, Home and End change the selection.
All systems steady
12 services reporting, 0 incidents
npx shadcn@latest add https://hyperblur.dev/r/nav-gooey.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/nav-gooey.tsx.
import { NavGooey } from "@/components/hyperblur/nav-gooey"
<NavGooey value={tab} onChange={setTab} items={[{ value: "home", label: "Home" }, { value: "docs", label: "Docs" }, { value: "blog", label: "Blog" }]} />| Prop | Type | Default | Description |
|---|---|---|---|
| items | { value: string; label: string; icon?: ReactNode }[] | Home, Explore, Inbox, Profile | Navigation entries. All items share the width equally. |
| value | string | Controlled active item. Pair with onChange. | |
| defaultValue | string | first item | Initial active item when uncontrolled. |
| onChange | (value: string) => void | Called when the user picks an item by click or keyboard. | |
| accent | string | "#2f7bff" | Blob color. |
| gooeyness | number | 7 | Blur radius of the gooey filter. Higher values merge the blobs more. |
| label | string | "Primary" | Accessible name of the navigation landmark. |
| ...rest | HTMLAttributes<HTMLElement> | Forwarded to the nav element. |