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/dot-pattern.tsx
+++ b/components/magicui/dot-pattern.tsx
@@ -0,0 +1,55 @@
+import { useId } from "react";
+
+import { cn } from "@/lib/utils";
+
+interface DotPatternProps {
+    width?: any;
+    height?: any;
+    x?: any;
+    y?: any;
+    cx?: any;
+    cy?: any;
+    cr?: any;
+    className?: string;
+    [key: string]: any;
+}
+
+export function DotPattern({
+    width = 16,
+    height = 16,
+    x = 0,
+    y = 0,
+    cx = 1,
+    cy = 1,
+    cr = 1,
+    className,
+    ...props
+}: DotPatternProps) {
+    const id = useId();
+
+    return (
+        <svg
+            aria-hidden="true"
+            className={cn(
+                "pointer-events-none absolute inset-0 h-full w-full fill-neutral-400/80",
+                className,
+            )}
+            {...props}
+        >
+            <defs>
+                <pattern
+                    id={id}
+                    width={width}
+                    height={height}
+                    patternUnits="userSpaceOnUse"
+                    patternContentUnits="userSpaceOnUse"
+                    x={x}
+                    y={y}
+                >
+                    <circle id="pattern-circle" cx={cx} cy={cy} r={cr} />
+                </pattern>
+            </defs>
+            <rect width="100%" height="100%" strokeWidth={0} fill={`url(#${id})`} />
+        </svg>
+    );
+}