animations

RippleClick

Adds a Material-style click ripple effect that emanates from the exact click position within any element.

v1.0.0react >=18next >=14tailwind >=4motion >=12

clickripplefeedbacktactileinteractivematerial

Preview

Loading preview...

Props

Prop	Type	Default	Description
`children*`	`ReactNode`	`—`	Content to wrap with the ripple effect
`color`	`string`	`rgba(255,255,255,0.3)`	Ripple color
`duration`	`number`	`600`	Ripple animation duration in milliseconds
`disabled`	`boolean`	`false`	Disable the ripple effect
`className`	`string`	`—`	Additional Tailwind classes
`id`	`string`	`—`	HTML id attribute

Slots

Slot	Type	Required	Description
`children`	`ReactNode`	Yes	The element that receives the ripple click effect

Layout

Display: block

Responsive: No

Wraps children in a relatively-positioned div with overflow hidden. Ripple spans are absolutely positioned within.

Examples

Basic ripple on a button

<RippleClick className="rounded-lg">
  <button className="w-full rounded-lg bg-neutral-800 px-6 py-3 font-semibold text-white">
    Click Me
  </button>
</RippleClick>

Custom ripple color

<RippleClick color="rgba(238,80,44,0.3)" className="rounded-xl">
  <div className="rounded-xl bg-neutral-900 p-6">
    <h3 className="font-bold">Interactive Card</h3>
    <p className="text-neutral-400">Click anywhere on this card</p>
  </div>
</RippleClick>

Slow ripple for large surfaces

<RippleClick duration={1000} className="rounded-2xl">
  <div className="rounded-2xl bg-gradient-to-br from-neutral-800 to-neutral-900 p-12">
    <p className="text-lg">Large interactive area</p>
  </div>
</RippleClick>

List item ripple

<ul>
  {items.map(item => (
    <RippleClick key={item.id}>
      <li className="border-b border-neutral-800 px-4 py-3">{item.name}</li>
    </RippleClick>
  ))}
</ul>

AI Usage Hint

Use RippleClick to add tactile click feedback to any element. Wrap buttons, cards, or list items. Set color to match your theme. The ripple emanates from the exact click position.

Works Well With

ShimmerButtonMagneticHover