Click anywhere on the button, rapidly for overlapping ripples

Controls

rippleColor

durations

variant

Ripple Button

Material-style ripples that expand from the exact point you press.

$ pnpm dlx shadcn@latest add @tweenly/ripple-button

import { RippleButton } from "@/components/ripple-button"

export function Demo() {
  return (
    <RippleButton rippleColor="#ff6a2b">
      Click me
    </RippleButton>
  )
}

Updates live as you change the controls. Only non-default props are included.