The RippleButton component sends a ripple out from the exact point it was pressed, sized to reach the button's farthest corner so the whole surface floods however near the edge you click.
Add it with the CLI, open it in v0, or copy the source into your project.
Adds the component and installs its dependencies for you.
npx shadcn@latest add https://uibeats.com/r/ripple-button.jsonEverything Ripple Button accepts.
| Prop | Type | Default | Description |
|---|---|---|---|
| children | React.ReactNode | No default | Button label |
| onClick | () => void | No default | Called on click, after the ripple is spawned |
| rippleColor | string | "rgba(255, 255, 255, 0.45)" | Colour of the ripple; any CSS colour works |
| duration | number | 0.7 | Seconds for one ripple to cross the button and fade |
| pressScale | number | 0.96 | Scale the button settles at while held |
| disabled | boolean | false | Disable the button and stop it rippling |
| type | "button" | "submit" | "reset" | "button" | Native button type |
| className | string | '' | Additional CSS classes applied to the button |
The ripple starts where you press, not in the middle.