This component no longer exists. It was in Wednesday UI’s manifest when we first indexed it and is not there now — the registry served its inventory on 2026-08-13 and this item was not on it. The install command below will fail. It is kept here because a tutorial somewhere still tells people to run it.
Use Ripple
wednesday-ui/use-rippleRemovedHook
A hook for creating ripples on an element
Install it
npx shadcn@latest add https://ui.ednesdayw.com/r/use-ripple.jsonSource
1import { useCallback, useState } from "react";23export interface RippleType {4 id: string;5 x: number;6 y: number;7 size: number;8}910export const useRipple = () => {11 const [ripples, setRipples] = useState<RippleType[]>([]);1213 const onClick = useCallback((e: React.MouseEvent<HTMLElement>) => {14 const target = e.currentTarget;15 const size = Math.max(target.clientWidth, target.clientHeight);16 const clientRect = target.getBoundingClientRect();17 const x = e.clientX - clientRect.left - size / 2;18 const y = e.clientY - clientRect.top - size / 2;1920 setRipples((prev) => [...prev, { id: crypto.randomUUID(), x, y, size }]);21 }, []);2223 const onClear = useCallback((id: string) => {24 setRipples((prev) => prev.filter((ripple) => ripple.id !== id));25 }, []);2627 return { ripples, onClick, onClear };28};2930export type UseRippleReturn = ReturnType<typeof useRipple>;
