The grid pattern renders using an SVG pattern element that creates a repeating grid with dots at each intersection point. The pattern supports customizable grid size (default 80px), dot radius (default 3px), and colors for both lines and dots.

The GridWithDots component can be used standalone as a background layer. It accepts props for gridSize, dotSize, lineColor, and dotColor to customize the appearance. Dark mode automatically inverts the colors through Tailwind's dark mode classes.

Ideal for hero sections, landing pages, feature sections, and any layout where you want a subtle grid texture with intersection markers.