A card lit by a soft radial spotlight that follows the pointer and catches the border. Wrap several in SpotlightGroup and one light spans the whole row.
npx shadcn@latest add https://hyperblur.dev/r/spotlight-card.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/spotlight-card.tsx.
import { SpotlightCard } from "@/components/hyperblur/spotlight-card"
<SpotlightGroup className="grid grid-cols-3 gap-3"><SpotlightCard className="p-5">Starter</SpotlightCard><SpotlightCard className="p-5">Pro</SpotlightCard><SpotlightCard className="p-5">Team</SpotlightCard></SpotlightGroup>| Prop | Type | Default | Description |
|---|---|---|---|
| children | ReactNode | Card content. | |
| color | string | "#7fb3ff" | Spotlight and border highlight color. |
| size | number | 320 | Spotlight radius in pixels. |
| radius | number | 16 | Corner radius in pixels. |
| borderWidth | number | 1 | Width of the border that lights up, in pixels. |
| idle | number | 0.35 | Strength of the resting light at the top edge while the pointer is away, from 0 to 1. |