Ripple Button

A button with animated ripple effects. It creates a ripple at the click location and fades out. Use it to enhance user interaction on buttons.

byMagic UI

Installation

terminal

pnpm dlx layro-cli add @magicuidesign/ripple-button

npx layro-cli add @magicuidesign/ripple-button

npx layro-cli add @magicuidesign/ripple-button

bunx layro-cli add @magicuidesign/ripple-button

New project? Start with init. Writes third-party code and installs packages with scripts off.

Code

Demo

"use client"

import React, {
  useCallback,
  useEffect,
  useRef,
  useState,
  type MouseEvent,
} from "react"

import { cn } from "@/lib/utils"

interface RippleButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
  rippleColor?: string