feat: Add Magic UI components including DotPattern, RainbowButton, ShineBorder, WordRotate, and BlurIn, along with corresponding Tailwind configuration updates.

2026-02-03 16:23:28 +00:00
parent 8d1923203d
commit 494acebeb3
14 changed files with 752 additions and 237 deletions
--- a/components/magicui/shine-border.tsx
+++ b/components/magicui/shine-border.tsx
@@ -0,0 +1,62 @@
+"use client";
+
+import { cn } from "@/lib/utils";
+
+type TColorProp = string | string[];
+
+interface ShineBorderProps {
+    borderRadius?: number;
+    borderWidth?: number;
+    duration?: number;
+    color?: TColorProp;
+    className?: string;
+    children: React.ReactNode;
+}
+
+/**
+ * @name Shine Border
+ * @description It is an animated background border effect component with easy to use and configurable props.
+ * @param borderRadius defines the radius of the border.
+ * @param borderWidth defines the width of the border.
+ * @param duration defines the animation duration to be applied on the shining border
+ * @param color a string or string array to define border color.
+ * @param className defines the class name to be applied to the component
+ * @param children nodes to be rendered in the center of the component
+ */
+export function ShineBorder({
+    borderRadius = 8,
+    borderWidth = 1,
+    duration = 14,
+    color = "#000000",
+    className,
+    children,
+}: ShineBorderProps) {
+    return (
+        <div
+            style={
+                {
+                    "--border-radius": `${borderRadius}px`,
+                } as React.CSSProperties
+            }
+            className={cn(
+                "relative min-h-[60px] w-fit min-w-[300px] place-items-center rounded-[--border-radius] bg-white p-3 text-black dark:bg-black dark:text-white",
+                className,
+            )}
+        >
+            <div
+                style={
+                    {
+                        "--border-width": `${borderWidth}px`,
+                        "--border-radius": `${borderRadius}px`,
+                        "--duration": `${duration}s`,
+                        "--mask-linear-gradient": `linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0)`,
+                        "--background-radial-gradient": `radial-gradient(transparent,transparent, ${Array.isArray(color) ? color.join(",") : color
+                            },transparent,transparent)`,
+                    } as React.CSSProperties
+                }
+                className={`before:bg-shine-size before:absolute before:inset-0 before:aspect-square before:size-full before:rounded-[--border-radius] before:p-[--border-width] before:will-change-[background-position] before:content-[""] before:![-webkit-mask-composite:xor] before:![mask-composite:exclude] before:[background-image:--background-radial-gradient] before:[background-size:300%_300%] before:[mask:--mask-linear-gradient] motion-safe:before:animate-shine`}
+            ></div>
+            {children}
+        </div>
+    );
+}