Copy and paste the following code into your project.
import { cn } from "@/lib/utils";
import { useId } from "react";
export default function DotsPattern({
dotSize = 2,
gapSize = 10,
patternOffset = [0, 0],
className,
}: {
/** The diameter of each dot */
dotSize?: number;
/** The gap between dots */
gapSize?: number;
/** The [x, y] offset of the pattern */
patternOffset?: [number, number];
className?: string;
}) {
const id = useId();
return (
<svg
className={cn(
"pointer-events-none absolute inset-0 text-black/10",
className,
)}
aria-hidden
width="100%"
height="100%"
>
<defs>
<pattern
id={`dots-${id}`}
x={patternOffset[0] - 1}
y={patternOffset[1] - 1}
width={dotSize + gapSize}
height={dotSize + gapSize}
patternUnits="userSpaceOnUse"
>
<rect
x={1}
y={1}
width={dotSize}
height={dotSize}
fill="currentColor"
rx={dotSize / 2}
/>
</pattern>
</defs>
<rect fill={`url(#dots-${id})`} width="100%" height="100%" />
</svg>
);
}