A horizontal nav with a single pill that glides to the hovered or selected item.
npx shadcn@latest add https://hyperblur.dev/r/pill-nav.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/pill-nav.tsx.
import { PillNav } from "@/components/hyperblur/pill-nav"
<PillNav items={[{ id: "home", label: "Home" }, { id: "docs", label: "Docs" }]} defaultActive="home" />| Prop | Type | Default | Description |
|---|---|---|---|
| items | { id: string; label: string; href?: string }[] | required | Tabs. An item with href renders as a link, otherwise as a button. |
| active | string | Id of the selected item. Pass it to control the selection. | |
| defaultActive | string | first item | Id of the item selected on mount when uncontrolled. |
| onChange | (id: string) => void | Called when the selection changes by click or arrow keys. | |
| followHover | boolean | true | Slide the pill to the hovered item and back to the selected one on leave. |