Skip to content
Portfolio Kit

Spotlight Card

Card with a soft glow that follows the pointer and a brighter rim on its border. Wrap cards in a group so one pointer lights the borders across a grid.

Installation

pnpm dlx shadcn@latest add @portfolio-kit/spotlight-card
First time? Add the @portfolio-kit registry to components.json
components.json
{
  "registries": {
    "@portfolio-kit": "https://www.parthjadhav.com/products/portfolio-kit/r/{name}.json"
  }
}

Usage

Examples

Group

Wrap a grid in SpotlightGroup and one pointer lights the rims of every nearby card, so the light carries across the gaps.

Custom color

Pass any CSS color to color (here the success token for an availability card) and a smaller size for a tighter glow.

API Reference