Ripple Click Effect React component
A wrapper that makes any surface ripple where it's pressed: the wave grows while the pointer is held and fades when it lets go, several can overlap, icon buttons can ripple from the centre, and Enter or Space ripples for keyboard users.
When to use the Ripple Click Effect component
Use Ripple to give touch-first interfaces immediate feedback where people press: buttons, list rows, cards, tiles. It shows the press registered even when the action takes a moment.
Keep it subtle (low opacity) and use one colour per surface: dark ripples on light buttons, light on dark.
Installation
Add the Ripple Click Effect component to your project with the shadcn CLI. It lands in components/ripple-click-effect.tsx as plain React + Tailwind CSS source you own and can edit.
npx shadcn@latest add https://reactframe.com/r/ripple-click-effect.jsonOr copy the source by hand and install its dependencies:
npm install motion clsx tailwind-mergeProps
<Ripple /> accepts 8 props, all optional.
| Prop | Type | Default |
|---|---|---|
| children | React.ReactNode | — |
| color Ripple colour (use currentColor to follow the text colour). | string | "currentColor" |
| opacity Peak opacity of the ripple. | number | 0.22 |
| duration Seconds for a ripple to spread across the surface. | number | 0.55 |
| center Always start from the middle (good for icon buttons). | boolean | false |
| disabled | boolean | false |
| className | string | — |
| style | React.CSSProperties | — |
- childrenReact.ReactNode
- color
Ripple colour (use currentColor to follow the text colour).
stringDefault: "currentColor" - opacity
Peak opacity of the ripple.
numberDefault: 0.22 - duration
Seconds for a ripple to spread across the surface.
numberDefault: 0.55 - center
Always start from the middle (good for icon buttons).
booleanDefault: false - disabledbooleanDefault: false
- classNamestring
- styleReact.CSSProperties
FAQ
- Does it work with any element?
- Yes. Wrap the element and give the wrapper the same border radius; the ripple is clipped to it and never blocks clicks.
- What happens on long presses?
- The ripple keeps its full strength while you hold and fades only when you let go, so long presses feel held.
- Is there feedback for keyboard users?
- Enter and Space start a ripple from the centre of the focused element.
