Card Spotlight
Card with a radial spotlight gradient that follows mouse position.
Preview
Card Spotlight
Interactive preview — import this component to see it in action
IO Context
Where IO uses this
Feature cards and pricing tier highlights.
Why this component matters
The spotlight effect creates a sense of depth and interactivity on flat card surfaces.
Usage guidance
Use with dark card backgrounds. The spotlight should be subtle (10-15% opacity). Works best in grids of 3-4 cards.
Installation
bash
npx shadcn@latest add @aceternity/card-spotlightUsage
example.tsxtsx
import { CardSpotlight } from "@/components/ui/card-spotlight";
export default function Example() {
return (
<CardSpotlight>
{/* Your content here */}
</CardSpotlight>
);
}Source
card-spotlight.tsx
components/ui/card-spotlight.tsx