Ripple Effect | HextaUI

Interactive ripple animation that creates expanding circles on user interaction, perfect for buttons and cards.

Preview

This is a Ripple Effect component. Click anywhere inside this box to see the ripple effect in action. You can customize the ripple color, duration, and size.

This component is available on 21st.dev.

Installation

NPM

npx shadcn@latest add "https://21st.dev/r/hextaui/ripple-effect"

Usage

App.tsx

import { RippleEffect } from "@/components/library/animation/RippleEffect";

<RippleEffect
  className="max-w-4xl w-full h-[20rem] rounded-4xl bg-zinc-800 text-white border border-primary/10 shadow-2xl/10 overflow-hidden relative group"
  size="md"
  rippleColor="rgba(255,255,255,0.4)"
>
  <div className="flex items-center p-8 w-full">
    <p>
      This is a <span className="font-semibold">Ripple Effect</span> component.
      Click anywhere inside this box to see the ripple effect in action. You can
      customize the ripple color, duration, and size.
    </p>
  </div>
</RippleEffect>;

Props

Prop	Type	Default
`disabled?`	`boolean`	-
`size?`	`"sm" \| "md" \| "lg" \| "auto"`	-
`maxRipples?`	`number`	-
`duration?`	`number`	-
`rippleColor?`	`string`	-
`className?`	`string`	-
`children?`	`ReactNode`	-