A centered floating pill nav with a springy highlight that slides between links, a search chip with a Cmd K shortcut and an account menu. It shrinks into a compact island when compact is set or the page scrolls.
npx shadcn@latest add https://hyperblur.dev/r/nav-floating-island.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/nav-floating-island.tsx.
import { NavFloatingIsland } from "@/components/hyperblur/nav-floating-island"
<NavFloatingIsland compactOnScroll showBackdrop={false} onSearch={() => setOpen(true)} />| Prop | Type | Default | Description |
|---|---|---|---|
| brand | string | "Frame" | Product name next to the logo. Hidden in compact mode. |
| links | { label: string; href: string }[] | Overview, Reviews, Library, Pricing | Links inside the pill. |
| active | number | Controlled index of the active link. Pair with onActiveChange. | |
| defaultActive | number | 0 | Active link index when uncontrolled. |
| onActiveChange | (index: number) => void | Called when a link is clicked. | |
| compact | boolean | Force the compact island on or off. Overrides compactOnScroll when set. | |
| compactOnScroll | boolean | false | Switch to the compact island once the window scrolls past 24px. |
| searchLabel | string | "Search" | Text of the search chip. |
| onSearch | () => void | Called by the search chip and by Cmd K or Ctrl K anywhere on the page. | |
| user | { name: string; email: string; plan?: string } | null | { name: "Leah Moreno", email: "leah@frame.so", plan: "Pro" } | Account shown in the avatar menu. Pass null to hide the avatar. |
| menu | { label: string; href?: string; shortcut?: string; danger?: boolean }[] | Profile, Billing, Keyboard shortcuts, Sign out | Items of the account menu. Danger items get a divider and red text. |
| defaultMenuOpen | boolean | false | Start with the account menu open. |
| onMenuItemSelect | (item: NavFloatingIslandMenuItem) => void | Called when an account menu item is chosen. | |
| accent | string | "#10b981" | Color of the logo, the active link dot, the presence dot, the plan badge and focus rings. |
| showBackdrop | boolean | true | Render a faded hero behind the island for previews. Turn it off in a real layout. |