Grid Pattern

Docs

Grid Pattern

A customizable grid pattern component for creating background effects

I'm Batman.

Installation

Copy and paste the following code into your project.

import { useId } from "react"
 
import { cn } from "@/lib/utils"
 
interface GridPatternProps {
  width?: number
  height?: number
  x?: number
  y?: number
  strokeWidth?: number
  className?: string
  [key: string]: any
}
 
export function GridPattern({
  width = 40,
  height = 40,
  x = 0,
  y = 0,
  strokeWidth = 1,
  className,
  ...props
}: GridPatternProps) {
  const id = useId()
 
  return (
    <svg
      aria-hidden="true"
      className={cn(
        "pointer-events-none absolute inset-0 h-full w-full stroke-neutral-400/30",
        className
      )}
      {...props}
    >
      <defs>
        <pattern
          id={id}
          width={width}
          height={height}
          patternUnits="userSpaceOnUse"
          patternContentUnits="userSpaceOnUse"
          x={x}
          y={y}
        >
          <line x1="0" y1="0" x2={width} y2="0" strokeWidth={strokeWidth} />
          <line x1="0" y1="0" x2="0" y2={height} strokeWidth={strokeWidth} />
        </pattern>
      </defs>
      <rect width="100%" height="100%" strokeWidth={0} fill={`url(#${id})`} />
    </svg>
  )
}
 
export GridPattern

Update the import paths to match your project setup.

Usage

import GridPattern from "@/components/ui/gridpattern"

export default function GridPatternDemo() {
  return (
    <div className="relative h-screen w-full">
      <GridPattern />
      <div className="absolute inset-0 flex items-center justify-center text-4xl font-bold text-black z-10 pointer-events-none dark:text-white">
         {/* Your content here */}
      </div>
    </div>
  )
}

Props

The GridPattern component accepts the following props:

width (number, optional): The width of each grid cell. Default is 40.
height (number, optional): The height of each grid cell. Default is 40.
x (number, optional): The x-offset of the grid. Default is 0.
y (number, optional): The y-offset of the grid. Default is 0.
strokeWidth (number, optional): The width of the grid lines. Default is 1.
className (string, optional): Additional CSS classes to apply to the component.

You can also pass any additional SVG attributes as props to the component.

Particle Background