React Bits

Spotlight Card

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

Spotlight Card, a React Bits 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 React Bits components

Related components

  • Chroma Grid

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

  • Card Swap

    A 3D stack of cards that sends the front card to the back on a timer, or when you fling it.

  • Decay Card

    An image card that tears and melts as the pointer moves, then pulls itself back together.