A list where one light source travels across all rows at once and lights their borders where it passes, while a soft highlight glides to the row under the pointer.
npx shadcn@latest add https://hyperblur.dev/r/hover-spotlight-list.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/hover-spotlight-list.tsx.
import { HoverSpotlightList } from "@/components/hyperblur/hover-spotlight-list"
<HoverSpotlightList onSelect={(i, item) => console.log(item.title)} />| Prop | Type | Default | Description |
|---|---|---|---|
| items | { title: string; detail: string; status?: string; tone?: string }[] | 4 services | Rows to show; tone colors the status dot. |
| accent | string | "#2f7bff" | Accent color for focus rings, highlights and glows. |
| radius | number | 110 | Radius of the light in pixels. |
| autoPlay | boolean | true | Sweep the light up and down the list on its own. The real pointer, a tap or keyboard focus takes over at once. |
| onSelect | (index: number, item) => void | Called when a row is clicked; the row is marked current. | |
| className | string | Extra classes on the root element. Other HTML attributes are forwarded too. |