Ripple Button
Free
A button whose ripple spreads from the exact point that was pressed.
Studio headphones
Wireless · 40 h battery
€89
Free delivery over €50
Customize
#f4ede3
0.6s
Installation
npx shadcn@latest add https://ui.mekaigames.com/r/ripple-button.jsonWorks in any project set up with the shadcn CLI.
Install the dependency.
npm install motion- Copy the code from the Code tab into
components/ui/ripple-button.tsx.
Usage
import { RippleButton } from "@/components/ui/ripple-button";
<RippleButton onClick={addToCart}>
Add to cart
</RippleButton>Props
5 properties| Property | Type | Default | Description |
|---|---|---|---|
| children | ReactNode | — | Button content. |
| color | string | "#f4ede3" | Color of the ripple. |
| duration | number | 0.6 | How long a ripple takes to spread and fade, in seconds. |
| className | string | — | Extra classes for the button. |
| ...props | ButtonHTMLAttributes | — | Any native button attribute, such as onClick, type or disabled. |
Dependencies: motion