feat(button): add new ripple button component

__registry__/index.tsx

@@ -646,6 +646,19 @@ export const Index: Record<string, any> = {
       subcategory: "undefined",
       chunks: [],
     },
+    "ripple-button": {
+      name: "ripple-button",
+      type: "registry:ui",
+      registryDependencies: undefined,
+      files: ["registry/default/magicui/ripple-button.tsx"],
+      component: React.lazy(
+        () => import("@/registry/default/magicui/ripple-button.tsx"),
+      ),
+      source: "",
+      category: "undefined",
+      subcategory: "undefined",
+      chunks: [],
+    },
     "file-tree": {
       name: "file-tree",
       type: "registry:ui",
@@ -1722,6 +1735,19 @@ export const Index: Record<string, any> = {
       subcategory: "undefined",
       chunks: [],
     },
+    "ripple-button-demo": {
+      name: "ripple-button-demo",
+      type: "registry:example",
+      registryDependencies: undefined,
+      files: ["registry/default/example/ripple-button-demo.tsx"],
+      component: React.lazy(
+        () => import("@/registry/default/example/ripple-button-demo.tsx"),
+      ),
+      source: "",
+      category: "undefined",
+      subcategory: "undefined",
+      chunks: [],
+    },
     "file-tree-demo": {
       name: "file-tree-demo",
       type: "registry:example",

config/docs.ts

@@ -415,6 +415,12 @@ export const docsConfig: DocsConfig = {
           items: [],
           label: "",
         },
+        {
+          title: "Ripple Button",
+          href: "/docs/components/ripple-button",
+          items: [],
+          label: "",
+        },
       ],
     },
     {

content/docs/components/ripple-button.mdx

@@ -0,0 +1,83 @@
+---
+title: Ripple Button
+date: 2024-10-19
+description: An animated button with ripple useful for user engagement.
+author: Sidd5arth
+published: true
+---
+
+<ComponentPreview name="ripple-button-demo" />
+
+## Installation
+
+<Tabs defaultValue="cli">
+
+<TabsList>
+  <TabsTrigger value="cli">CLI</TabsTrigger>
+  <TabsTrigger value="manual">Manual</TabsTrigger>
+</TabsList>
+<TabsContent value="cli">
+
+```bash
+npx shadcn@latest add "https://magicui.design/r/ripple-button"
+```
+
+</TabsContent>
+
+<TabsContent value="manual">
+
+<Steps>
+
+<Step>Copy and paste the following code into your project.</Step>
+
+<ComponentSource name="ripple-button" />
+
+<Step>Update the import paths to match your project setup.</Step>
+
+<Step>Update `tailwind.config.js`</Step>
+
+Add the following animations to your `tailwind.config.js` file:
+
+```js title="tailwind.config.js" {5-13}
+/** @type {import('tailwindcss').Config} */
+// tailwind.config.js
+module.exports = {
+  theme: {
+    extend: {
+      animation: {
+        rippling: "rippling var(--duration) ease-out",
+      },
+      keyframes: {
+        rippling: {
+          "0%": {
+            opacity: "1",
+          },
+          "100%": {
+            transform: "scale(2)",
+            opacity: "0",
+          },
+        },
+      },
+    },
+  },
+};
+```
+
+</Steps>
+
+</TabsContent>
+
+</Tabs>
+
+## Props
+
+| Prop        | Type            | Description                                               |
+| ----------- | --------------- | --------------------------------------------------------- |
+| children    | React.ReactNode | The content of the button.                                |
+| className   | 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
+
+- Credit to [@Sidd5arth](https://github.com/Sidd5arth)

public/r/index.json

@@ -858,6 +858,38 @@
       }
     }
   },
+  {
+    "name": "ripple-button",
+    "type": "registry:ui",
+    "files": [
+      {
+        "path": "magicui/ripple-button.tsx",
+        "type": "registry:ui"
+      }
+    ],
+    "tailwind": {
+      "config": {
+        "theme": {
+          "extend": {
+            "animation": {
+              "rippling": "rippling var(--duration) ease-out"
+            },
+            "keyframes": {
+              "rippling": {
+                "0%": {
+                  "opacity": "1"
+                },
+                "100%": {
+                  "transform": "scale(2)",
+                  "opacity": "0"
+                }
+              }
+            }
+          }
+        }
+      }
+    }
+  },
   {
     "name": "file-tree",
     "type": "registry:ui",

public/r/styles/default/ripple-button.json

@@ -0,0 +1,34 @@
+{
+  "name": "ripple-button",
+  "type": "registry:ui",
+  "files": [
+    {
+      "path": "magicui/ripple-button.tsx",
+      "content": "\"use client\";\n\nimport React, { useState, useEffect, MouseEvent } from \"react\";\nimport { cn } from \"@/lib/utils\";\n\ninterface RippleButtonProps\n  extends React.ButtonHTMLAttributes<HTMLButtonElement> {\n  rippleColor?: string;\n  duration?: string;\n}\n\nexport default function RippleButton({\n  className,\n  children,\n  rippleColor = \"#ffffff\",\n  duration = \"600ms\",\n  ...props\n}: RippleButtonProps) {\n  const [buttonRipples, setButtonRipples] = useState<\n    Array<{ x: number; y: number; size: number; key: number }>\n  >([]);\n\n  const createRipple = (event: MouseEvent<HTMLButtonElement>) => {\n    const button = event.currentTarget;\n    const rect = button.getBoundingClientRect();\n    const size = Math.max(rect.width, rect.height);\n    const x = event.clientX - rect.left - size / 2;\n    const y = event.clientY - rect.top - size / 2;\n\n    const newRipple = { x, y, size, key: Date.now() };\n    setButtonRipples((prevRipples) => [...prevRipples, newRipple]);\n  };\n\n  useEffect(() => {\n    if (buttonRipples.length > 0) {\n      const lastRipple = buttonRipples[buttonRipples.length - 1];\n      const timeout = setTimeout(() => {\n        setButtonRipples((prevRipples) =>\n          prevRipples.filter((ripple) => ripple.key !== lastRipple.key),\n        );\n      }, parseInt(duration));\n      return () => clearTimeout(timeout);\n    }\n  }, [buttonRipples, duration]);\n\n  return (\n    <button\n      className={cn(\n        \"relative overflow-hidden text-center cursor-pointer flex justify-center items-center rounded-lg text-white bg-black-500 px-4 py-2 border-2\",\n        className,\n      )}\n      onClick={createRipple}\n      {...props}\n    >\n      <div className=\"relative z-10\">{children}</div>\n      <span className=\"absolute inset-0 pointer-events-none\">\n        {buttonRipples.map((ripple) => (\n          <span\n            className=\"absolute animate-rippling bg-white opacity-30 rounded-full\"\n            key={ripple.key}\n            style={{\n              width: `${ripple.size}px`,\n              height: `${ripple.size}px`,\n              top: `${ripple.y}px`,\n              left: `${ripple.x}px`,\n              backgroundColor: rippleColor,\n              transform: `scale(0)`,\n            }}\n          />\n        ))}\n      </span>\n    </button>\n  );\n}\n",
+      "type": "registry:ui",
+      "target": ""
+    }
+  ],
+  "tailwind": {
+    "config": {
+      "theme": {
+        "extend": {
+          "animation": {
+            "rippling": "rippling var(--duration) ease-out"
+          },
+          "keyframes": {
+            "rippling": {
+              "0%": {
+                "opacity": "1"
+              },
+              "100%": {
+                "transform": "scale(2)",
+                "opacity": "0"
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+}

registry/default/example/ripple-button-demo.tsx

@@ -0,0 +1,5 @@
+import RippleButton from "@/registry/default/magicui/ripple-button";
+
+export default function RippleButtonDemo() {
+  return <RippleButton rippleColor="#ADD8E6">Click me</RippleButton>;
+}

registry/default/magicui/ripple-button.tsx

@@ -0,0 +1,90 @@
+"use client";
+
+import React, { useState, useEffect, MouseEvent } from "react";
+import { cn } from "@/lib/utils";
+
+interface RippleButtonProps
+  extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+  rippleColor?: string;
+  duration?: string;
+}
+
+const RippleButton = React.forwardRef<HTMLButtonElement, RippleButtonProps>(
+  (
+    {
+      className,
+      children,
+      rippleColor = "#ffffff",
+      duration = "600ms",
+      onClick,
+      ...props
+    },
+    ref,
+  ) => {
+    const [buttonRipples, setButtonRipples] = useState<
+      Array<{ x: number; y: number; size: number; key: number }>
+    >([]);
+
+    const handleClick = (event: MouseEvent<HTMLButtonElement>) => {
+      createRipple(event);
+      onClick?.(event);
+    };
+
+    const createRipple = (event: MouseEvent<HTMLButtonElement>) => {
+      const button = event.currentTarget;
+      const rect = button.getBoundingClientRect();
+      const size = Math.max(rect.width, rect.height);
+      const x = event.clientX - rect.left - size / 2;
+      const y = event.clientY - rect.top - size / 2;
+
+      const newRipple = { x, y, size, key: Date.now() };
+      setButtonRipples((prevRipples) => [...prevRipples, newRipple]);
+    };
+
+    useEffect(() => {
+      if (buttonRipples.length > 0) {
+        const lastRipple = buttonRipples[buttonRipples.length - 1];
+        const timeout = setTimeout(() => {
+          setButtonRipples((prevRipples) =>
+            prevRipples.filter((ripple) => ripple.key !== lastRipple.key),
+          );
+        }, parseInt(duration));
+        return () => clearTimeout(timeout);
+      }
+    }, [buttonRipples, duration]);
+
+    return (
+      <button
+        className={cn(
+          "bg-black-500 relative flex cursor-pointer items-center justify-center overflow-hidden rounded-lg border-2 bg-background px-4 py-2 text-center text-primary",
+          className,
+        )}
+        onClick={handleClick}
+        ref={ref}
+        {...props}
+      >
+        <div className="relative z-10">{children}</div>
+        <span className="pointer-events-none absolute inset-0">
+          {buttonRipples.map((ripple) => (
+            <span
+              className="absolute animate-rippling rounded-full bg-background opacity-30"
+              key={ripple.key}
+              style={{
+                width: `${ripple.size}px`,
+                height: `${ripple.size}px`,
+                top: `${ripple.y}px`,
+                left: `${ripple.x}px`,
+                backgroundColor: rippleColor,
+                transform: `scale(0)`,
+              }}
+            />
+          ))}
+        </span>
+      </button>
+    );
+  },
+);
+
+RippleButton.displayName = "RippleButton";
+
+export default RippleButton;

registry/registry-examples.ts

@@ -437,6 +437,11 @@ export const examples: Registry = [
     type: "registry:example",
     files: ["example/pulsating-button-demo.tsx"],
   },
+  {
+    name: "ripple-button-demo",
+    type: "registry:example",
+    files: ["example/ripple-button-demo.tsx"],
+  },
   {
     name: "file-tree-demo",
     type: "registry:example",

registry/registry-ui.ts

@@ -537,6 +537,33 @@ export const ui: Registry = [
       },
     },
   },
+  {
+    name: "ripple-button",
+    type: "registry:ui",
+    files: ["magicui/ripple-button.tsx"],
+    tailwind: {
+      config: {
+        theme: {
+          extend: {
+            animation: {
+              rippling: "rippling var(--duration) ease-out",
+            },
+            keyframes: {
+              rippling: {
+                "0%": {
+                  opacity: "1",
+                },
+                "100%": {
+                  transform: "scale(2)",
+                  opacity: "0",
+                },
+              },
+            },
+          },
+        },
+      },
+    },
+  },
   {
     name: "file-tree",
     type: "registry:ui",

tailwind.config.cjs

@@ -76,6 +76,7 @@ module.exports = {
         "shimmer-slide":
           "shimmer-slide var(--speed) ease-in-out infinite alternate",
         ripple: "ripple var(--duration,2s) ease calc(var(--i, 0)*.2s) infinite",
+        rippling: "rippling var(--duration, 0.6s) ease-out",
         line: "line 2s linear infinite",
         "border-beam": "border-beam calc(var(--duration)*1s) infinite linear",
         orbit: "orbit calc(var(--duration)*1s) linear infinite",
@@ -145,6 +146,15 @@ module.exports = {
             transform: "translate(-50%, -50%) scale(0.9)",
           },
         },
+        rippling: {
+          "0%": {
+            opacity: "1",
+          },
+          "100%": {
+            transform: "scale(2)",
+            opacity: "0",
+          }
+        },
         "shimmer-slide": {
           to: {
             transform: "translate(calc(100cqw - 100%), 0)",