Spotlight Card
A card component that reveals a radial gradient background as you hover over it.
Lightning Fast
Experience zero latency with our edge network optimized for speed.
Secure
Enterprise-grade security out of the box. No configuration needed.
Installation
Run the following command to install the `spotlight-card` components:
npx shadcn-svelte@latest add https://more-shadcn.noair.fun/r/spotlight-card.json
Custom Colors
You can change the spotlight color by passing any valid CSS color string to the
color prop. Using specific rgba values gives the best control over opacity. Red Spotlight
Blue Spotlight
Emerald Spotlight
Using Theme Colors
To use your Tailwind theme variables (like
--primary), you can use the CSS hsl() syntax.Brand Primary
This spotlight uses your configured primary color automatically.
Spotlight Size
Adjust the
size prop to control the pixel radius of the spotlight effect.Small Spotlight (100px)
Good for small interactive elements
Large Spotlight (600px)
Good for hero sections or large panels