Next.js Discord

Discord Forum

does anyone know how to do a button ripple effect with shadcn?

Unanswered
English Lop posted this in #help-forum
Open in Discord
Avatar
English LopOP
i love nextui's button ripple effect but i have no idea how to do such a thing in shadcn. could any of you point me in the right direction or assist me in some way?

9 Replies

Avatar
averydelusionalperson
you can just copy any styles, and apply those to shadcn button
Avatar
English LopOP
it's not that simple for the ripple effect though
Avatar
averydelusionalperson
so, like you need javascript?
Avatar
English LopOP
i have no idea how the ripple effect is done
but yes it'd need javascript i would believe as the ripple comes from the cursor's position
Avatar
averydelusionalperson
I'm not sure too how to do it, but I believe you can google it, and add styles or other things here in the components/ui/button
Image
you can ask doubts here if you get stuck while adding something.
Avatar
averydelusionalperson
Hi @English Lop, did you manage to add the ripple effect?
Avatar
Singapura
Here's what NextUI does to create the ripple effect: https://github.com/nextui-org/nextui/blob/main/packages/components/ripple/src/use-ripple.ts