Command Palette
Search for a command to run...
Loading component...
Gradient hover cards
Beautiful gradient cards with mouse-following gradient effects that create a dynamic, colorful overlay on hover, perfect for showcasing content with visual appeal
Dependencies
Interaction Type
| Hover the card to see the gradient | |
| Move mouse to follow gradient | |
| Works with both theme |
CLI UNAVAILABLE
pro component, try copying the source code from top right cornerHow to use
import { Skiper90, SkiperGradiantCard, GradiantCardBody, GradiantCardTitle, } from "@/components/v1/skiper90"; const DemoSkiper90 = () => { return ( <div className="w-full max-w-4xl p-4"> <SkiperGradiantCard className="p-1"> <GradiantCardBody> <div className="relative flex h-full w-full items-center justify-center"> <img src="/path/to/image.svg" alt="" className="h-full w-full rounded-2xl object-cover" /> </div> </GradiantCardBody> <GradiantCardTitle>Card Title</GradiantCardTitle> </SkiperGradiantCard> </div> ); };
Props | Description |
|---|---|
circleSize | Size of the gradient circle |
className | Additional CSS classes |
children | Card content components |
Attribution
- Inspired by React Bits Magic Bento
- Inspired by Aceternity UI Glowing Effect
- Inspired by CuiCui.day
Source code
Click on the top right to view the source code
Keep in mind
Most components here are recreations of the best out there. I don't claim to be the original creator. This is my attempt to reverse-engineer, replicate, and often add a few extra features. I've tried to credit everyone, but if I missed something, let me know.
Contact
Additionlly, if you find any bug or issue, feel free toDrop a dm.
License & Usage:
- Free to use and modify in both personal and commercial projects.
- Attribution to Skiper UI is required when using the free version.
- No attribution required with Skiper UI Pro.