Click Ripples

A React component that creates a smooth, animated ripple effect at the point of user interaction. Perfect for adding delightful feedback to backgrounds, cards, or any interactive UI element.

Preview

Installation

bunx --bun shadcn@latest add https://shahram.dev/r/click-ripples.json

Usage

Global

import { ClickRipples } from "@/components/shahram.dev/click-ripples";

export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <body>
        <ClickRipples>
          {children}
        </ClickRipples>
      </body>
    </html>
  );
}

Local

import { ClickRipples } from "@/components/shahram.dev/click-ripples";

export function CardWithRipple() {
  return (
    <ClickRipples radius={60} rippleTime_inSec={0.7} color="rgba(0,150,255,0.3)">
      <div className="rounded-lg bg-zinc-800 p-8 text-white">
        Click inside this card!
      </div>
    </ClickRipples>
  );
}

API reference

Prop	Type	Default	Description
children	ReactNode	-	Content to render inside the ripple container
radius	number	50	Diameter of the ripple in pixels
rippleTime_inSec	number	0.3	Duration of the ripple animation (in seconds)
color	string	rgba(255,255,255,0.8)	Ripple color in rgba format