Ripple - Saturation UI

Installation

pnpm dlx shadcn@latest add @saturation-ui/ripple

Tailwind v4 — Source Scanning

The public shadcn registry installs component source into your project. If Tailwind v4 isn't scanning your components directory, add this to your CSS entry file:

@source "../components";

This ensures all utility classes in CVA variants and data attribute selectors are included in your build.

Usage

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

<div className="relative h-[400px] w-full overflow-hidden">
  <p className="z-10 text-4xl font-semibold">Hello</p>
  <Ripple />
</div>

API Reference

Prop	Type	Default	Description
`mainCircleSize`	`number`	`210`	Size of the center circle in pixels.
`mainCircleOpacity`	`number`	`0.24`	Opacity of the center circle.
`numCircles`	`number`	`8`	Number of concentric ripple rings.

Ripple