PressRipple

A ripple that spreads from exactly where a button is pressed.

Installation

bash
npx shadcn@latest add https://www.rad-ui.com/r/press-ripple.json

React
import PressRipple from "@/components/fx/press-ripple"

<PressRipple><button>Press me</button></PressRipple>

Ripples are aria-hidden and removed after their animation.
Enter and Space ripple from the centre, so keyboard presses get feedback too.
prefers-reduced-motion: reduce (or data-rad-fx-motion="reduce" on an ancestor) shows no ripple.

Prop	Type	Default	Description
children	ReactNode	—	Usually a button.
color	string	white, 35%	Ripple colour.
radius	number \| string	8	Corner radius to clip to.