Spotlight Card
A card that reveals a spotlight effect on hover.
Preview
Spotlight Effect
Move your mouse over this card to see the spotlight follower effect.
Installation
bash
npx auralix-ui add spotlight-cardUsage
Default Spotlight
tsx
import { SpotlightCard } from "@/components/ui/SpotlightCard";
<SpotlightCard>
<div className="p-6">
<h3 className="font-bold">Hover me</h3>
<p>I have a spotlight effect.</p>
</div>
</SpotlightCard>Props
| Name | Type | Default | Description |
|---|---|---|---|
spotlightColor | string | "rgba(139, 92, 246, 0.15)" | Color of the spotlight. |
children | ReactNode | - | Card content. |
On this page