Skip to main content

Documentation Index

Fetch the complete documentation index at: https://mintlify.com/Max-Samson/magicui/llms.txt

Use this file to discover all available pages before exploring further.

A concentric ripple animation effect that creates expanding circles, perfect for drawing attention to central elements.

​
Installation

    ​
    Usage

    import { Ripple } from "@/components/ui/ripple"

export default function Example() {
  return (
    <div className="relative h-[500px] w-full overflow-hidden flex items-center justify-center">
      <div className="z-10">
        {/* Your content here */}
      </div>
      <Ripple />
    </div>
  )
}

    ​
    Custom Configuration

    import { Ripple } from "@/components/ui/ripple"

export default function Example() {
  return (
    <div className="relative h-[500px] w-full overflow-hidden flex items-center justify-center">
      <div className="z-10">
        {/* Your content here */}
      </div>
      <Ripple 
        mainCircleSize={300}
        mainCircleOpacity={0.3}
        numCircles={10}
      />
    </div>
  )
}

    ​
    Props

    PropTypeDefaultDescription
    mainCircleSizenumber210Size of the innermost circle in pixels
    mainCircleOpacitynumber0.24Opacity of the innermost circle
    numCirclesnumber8Number of ripple circles to render
    classNamestring-Additional CSS classes for the container
    Each ripple circle is automatically sized and animated with staggered delays based on the mainCircleSize and numCircles props.
    Position content with higher z-index to ensure it appears above the ripple effect.

    Build docs developers (and LLMs) love

    Get started for freeTalk to us