Astra

Spotlight Card

Card lit by a soft spotlight that follows the pointer, catches its edge and reaches nearby cards.

Spotlight Card, a Astra component

Use Spotlight Card in your project

Choose JavaScript or TypeScript and plain CSS or Tailwind. Enable JavaScript for the interactive preview, customization controls and source tabs.

npx shadcn@latest add @react-bits/SpotlightCard-TS-TW
How to install Astra components

Related components

  • Card Nav

    A navigation bar that springs open into a row of cards, each with its own links.

  • Chroma Grid

    A grid of grayscale photo cards where a spotlight follows the cursor and brings back color.

  • Magic Bento

    A bento grid of feature cards with live artwork, edge light that follows the cursor and a click wave.