Copy and paste the following code into your project.
import { cn } from "@/lib/utils";
import { useId } from "react";
export default function GridPattern({
cellSize = 24,
strokeWidth = 1,
patternOffset = [0, 0],
className,
}: {
/** The size of each grid cell */
cellSize?: number;
/** The width of the grid lines */
strokeWidth?: 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={`grid-${id}`}
x={patternOffset[0]}
y={patternOffset[1]}
width={cellSize}
height={cellSize}
patternUnits="userSpaceOnUse"
>
<path
d={`M ${cellSize} 0 L 0 0 0 ${cellSize}`}
fill="none"
stroke="currentColor"
strokeWidth={strokeWidth}
/>
</pattern>
</defs>
<rect fill={`url(#grid-${id})`} width="100%" height="100%" />
</svg>
);
}