KQ-577 · TAP/RIPPLE

Tap Ripple

A press ripple that starts where the press did. On pointerdown a disc is placed under the finger and expands on a tween over durations.slow — a spreading front, not a landing, so it never springs — sized from the press point to the furthest corner so it always covers the surface, and it fades on the exit ease when the press is let go. Enter and Space ripple from the centre because a keyboard press has no point to start from, and the wrapper clones the button rather than boxing it, so role, label, disabled state and handlers are exactly what the caller wrote.

KQ-577 · TAP/RIPPLE

Pressed None

Install

One command — the source lands in your repo. Or copy it from the Code tab.

$ pnpm dlx shadcn@latest add @kinetiq/tap-ripple

Props

color: string; default —; Ripple colour, used at full strength. Left out, the disc is currentColor at 16%.
duration: number; default 400; Expansion in milliseconds; the fade on release runs on the base tween regardless.
children: React.ReactElement; default —; The button. It is cloned, not wrapped: it keeps its own classes, handlers and semantics.

Prop	Type	Default	Description
color	string	—	Ripple colour, used at full strength. Left out, the disc is currentColor at 16%.
duration	number	400	Expansion in milliseconds; the fade on release runs on the base tween regardless.
children	React.ReactElement	—	The button. It is cloned, not wrapped: it keeps its own classes, handlers and semantics.