Skip to content
Magic UI SolidMagicUI Solid
Menu
Getting Started
IntroductionInstallation
Components
MarqueeTerminalHero Video DialogBento GridAnimated ListDockGlobeTweet CardOrbiting CirclesAvatar CirclesLensIcon CloudPointerSmooth CursorProgressive BlurDotted Map
Special Effects
Animated BeamBorder BeamShine BorderMagic CardGlare HoverMeteorsConfettiParticlesTheme Toggler
Animations
Blur Fade
Text Animations
Text AnimateTyping AnimationLine Shadow TextAurora TextVideo TextNumber TickerAnimated Shiny TextAnimated Gradient TextText RevealDia Text RevealHyper TextWord RotateScroll Based VelocitySparkles TextMorphing TextSpinning TextText HighlighterText 3D Flip
Device Mocks
SafariiPhoneAndroid
Buttons
Rainbow ButtonShimmer ButtonRipple Button
Backgrounds
Flickering GridAnimated Grid PatternRetro GridRippleDot PatternGrid PatternHexagon PatternStriped PatternInteractive Grid PatternLight RaysNoise Texture
Community
Shiny ButtonFile TreeCode ComparisonScroll ProgressNeon Gradient CardComic TextKinetic TextCool ModePixel ImagePulsating ButtonWarp BackgroundInteractive Hover ButtonAnimated Circular Progress BarBacklightGlyph Matrix

Ripple Button

An animated button with ripple useful for user engagement

@/demos/RippleButtonDemo.tsx
import { RippleButton } from '@/registry/magicui/ripple-button'


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

Installation

Section titled “Installation”
Terminal window
pnpm dlx shadcn@latest add @magicui-solid/ripple-button

Import

Section titled “Import”
import { RippleButton } from '@/components/magicui/ripple-button'

Usage

Section titled “Usage”
<RippleButton>Ripple Button</RippleButton>

Props

Section titled “Props”
Prop Type Default Description
children JSX.Element - The content of the button.
class string - Additional class names for the button.
rippleColor string - The rbg numbers only for the color of the rippling waves.
duration string - The time span of one ripple.

Credits

Section titled “Credits”

Original:

magicui.design/docs/components/ripple-button