Shadcn.io is not affiliated with official shadcn/ui
Ripple Button
Material Design ripple effect button with expanding circles from click point for React, Next.js, shadcn/ui, Tailwind CSS, TypeScript. Built on the base-ui shadcn Button.
Ripple Button preview
Classic Material Design ripple effect that creates expanding circles from where you click. Each click spawns a new ripple that expands and fades, creating satisfying visual feedback. Supports multiple simultaneous ripples for rapid clicking. Built on top of the shadcn Button so every variant and size you already use just works, with Motion for React handling the ripple animation. Perfect for any interactive button that needs tactile feedback.
Install with AI
If you've connected the shadcn.io MCP server to Claude Code, Cursor, Windsurf, or any MCP-ready AI editor, prompt your agent to install this button for you — no copy-paste, no CLI:
use shadcnio to install the ripple-button button into my projectRelated Components
Confetti Button
Particle burst on click
Record Button
Recording state machine
Pulse Button
Pulsing attention rings
Depth Button
Tactile 3D press
Magnetic Button
Cursor magnetic pull
Success Button
Success checkmark state
FAQ
Was this page helpful?
Sign in to leave feedback.
Record Button
Recording state-machine button — circle ↔ square icon morph inside, with a destructive-tinted pulsing ring around the button while recording, for React, Next.js, shadcn/ui, Tailwind CSS, TypeScript. Built on the base-ui shadcn Button.
Shake Button
Button that shakes horizontally to indicate errors or invalid actions for React, Next.js, shadcn/ui, Tailwind CSS, TypeScript. Built on the base-ui shadcn Button.