Interactive Grid Pattern

Interactive SVG grid background component for React and Next.js applications. Built with TypeScript support, Tailwind CSS styling, and shadcn/ui design featuring hover effects, customizable dimensions, and responsive layouts.

React

Loading component...

"use client";import React, { useState } from "react";import { cn } from "@/lib/utils";/** * InteractiveGridPattern is a component that renders a grid pattern with interactive squares. * * @param width - The width of each square. * @param height - The height of each square. * @param squares - The number of squares in the grid. The first element is the number of horizontal squares, and the second element is the number of vertical squares. * @param className - The class name of the grid. * @param squaresClassName - The class name of the squares. */interface InteractiveGridPatternProps extends React.SVGProps<SVGSVGElement> {  width?: number;  height?: number;  squares?: [number, number]; // [horizontal, vertical]  className?: string;  squaresClassName?: string;}/** * The InteractiveGridPattern component. * * @see InteractiveGridPatternProps for the props interface. * @returns A React component. */export function InteractiveGridPattern({  width = 40,  height = 40,  squares = [24, 24],  className,  squaresClassName,  ...props}: InteractiveGridPatternProps) {  const [horizontal, vertical] = squares;  const [hoveredSquare, setHoveredSquare] = useState<number | null>(null);  return (    <svg      width={width * horizontal}      height={height * vertical}      className={cn(        "absolute inset-0 h-full w-full border border-gray-400/30",        className,      )}      {...props}    >      {Array.from({ length: horizontal * vertical }).map((_, index) => {        const x = (index % horizontal) * width;        const y = Math.floor(index / horizontal) * height;        return (          <rect            key={index}            x={x}            y={y}            width={width}            height={height}            className={cn(              "stroke-gray-400/30 transition-all duration-100 ease-in-out [&:not(:hover)]:duration-1000",              hoveredSquare === index ? "fill-gray-300/30" : "fill-transparent",              squaresClassName,            )}            onMouseEnter={() => setHoveredSquare(index)}            onMouseLeave={() => setHoveredSquare(null)}          />        );      })}    </svg>  );}export type { InteractiveGridPatternProps };

Installation

npx shadcn@latest add https://www.shadcn.io/registry/interactive-grid-pattern.json

npx shadcn@latest add https://www.shadcn.io/registry/interactive-grid-pattern.json

pnpm dlx shadcn@latest add https://www.shadcn.io/registry/interactive-grid-pattern.json

bunx shadcn@latest add https://www.shadcn.io/registry/interactive-grid-pattern.json

Features

Interactive hover effects - Grid squares respond to mouse enter/leave events using JavaScript
SVG-based rendering - Crisp scaling at any resolution with minimal DOM impact for React apps
Tailwind CSS integration - Complete styling control with utility classes for Next.js projects
Customizable dimensions - Control grid size, cell dimensions, and interactive areas using TypeScript props
Performance optimized - Efficient rendering with minimal DOM nodes and smooth animations
Accessible design - Proper aria-hidden markup for decorative backgrounds using shadcn/ui patterns
Open source - Free interactive grid component with transform and mask support

Examples

Colorful Hover Effects

Loading component...

"use client";import React, { useState } from "react";import { cn } from "@/lib/utils";/** * InteractiveGridPattern is a component that renders a grid pattern with interactive squares. * * @param width - The width of each square. * @param height - The height of each square. * @param squares - The number of squares in the grid. The first element is the number of horizontal squares, and the second element is the number of vertical squares. * @param className - The class name of the grid. * @param squaresClassName - The class name of the squares. */interface InteractiveGridPatternProps extends React.SVGProps<SVGSVGElement> {  width?: number;  height?: number;  squares?: [number, number]; // [horizontal, vertical]  className?: string;  squaresClassName?: string;}/** * The InteractiveGridPattern component. * * @see InteractiveGridPatternProps for the props interface. * @returns A React component. */export function InteractiveGridPattern({  width = 40,  height = 40,  squares = [24, 24],  className,  squaresClassName,  ...props}: InteractiveGridPatternProps) {  const [horizontal, vertical] = squares;  const [hoveredSquare, setHoveredSquare] = useState<number | null>(null);  return (    <svg      width={width * horizontal}      height={height * vertical}      className={cn(        "absolute inset-0 h-full w-full border border-gray-400/30",        className,      )}      {...props}    >      {Array.from({ length: horizontal * vertical }).map((_, index) => {        const x = (index % horizontal) * width;        const y = Math.floor(index / horizontal) * height;        return (          <rect            key={index}            x={x}            y={y}            width={width}            height={height}            className={cn(              "stroke-gray-400/30 transition-all duration-100 ease-in-out [&:not(:hover)]:duration-1000",              hoveredSquare === index ? "fill-gray-300/30" : "fill-transparent",              squaresClassName,            )}            onMouseEnter={() => setHoveredSquare(index)}            onMouseLeave={() => setHoveredSquare(null)}          />        );      })}    </svg>  );}export type { InteractiveGridPatternProps };

Multiple Variants

Loading component...

"use client";import React, { useState } from "react";import { cn } from "@/lib/utils";/** * InteractiveGridPattern is a component that renders a grid pattern with interactive squares. * * @param width - The width of each square. * @param height - The height of each square. * @param squares - The number of squares in the grid. The first element is the number of horizontal squares, and the second element is the number of vertical squares. * @param className - The class name of the grid. * @param squaresClassName - The class name of the squares. */interface InteractiveGridPatternProps extends React.SVGProps<SVGSVGElement> {  width?: number;  height?: number;  squares?: [number, number]; // [horizontal, vertical]  className?: string;  squaresClassName?: string;}/** * The InteractiveGridPattern component. * * @see InteractiveGridPatternProps for the props interface. * @returns A React component. */export function InteractiveGridPattern({  width = 40,  height = 40,  squares = [24, 24],  className,  squaresClassName,  ...props}: InteractiveGridPatternProps) {  const [horizontal, vertical] = squares;  const [hoveredSquare, setHoveredSquare] = useState<number | null>(null);  return (    <svg      width={width * horizontal}      height={height * vertical}      className={cn(        "absolute inset-0 h-full w-full border border-gray-400/30",        className,      )}      {...props}    >      {Array.from({ length: horizontal * vertical }).map((_, index) => {        const x = (index % horizontal) * width;        const y = Math.floor(index / horizontal) * height;        return (          <rect            key={index}            x={x}            y={y}            width={width}            height={height}            className={cn(              "stroke-gray-400/30 transition-all duration-100 ease-in-out [&:not(:hover)]:duration-1000",              hoveredSquare === index ? "fill-gray-300/30" : "fill-transparent",              squaresClassName,            )}            onMouseEnter={() => setHoveredSquare(index)}            onMouseLeave={() => setHoveredSquare(null)}          />        );      })}    </svg>  );}export type { InteractiveGridPatternProps };

Use Cases

Hero backgrounds - Interactive grid overlays for landing page sections
Dashboard layouts - Subtle background patterns with hover feedback
Portfolio sites - Creative grid effects for design showcases
App interfaces - Decorative backgrounds with responsive interaction

API Reference

InteractiveGridPattern Props

Prop	Type	Default	Description
`className`	`string`	-	Additional CSS classes for the SVG element
`width`	`number`	`40`	Width of each grid cell in pixels
`height`	`number`	`40`	Height of each grid cell in pixels
`squares`	`[number, number]`	`[24, 24]`	Number of squares [horizontal, vertical]
`squaresClassName`	`string`	-	CSS classes applied to interactive squares

Implementation

SVG-based with mouse event handlers on individual squares. Use squaresClassName for hover effects. Supports CSS transforms and mask-image for advanced effects. Marked as decorative for accessibility.

Interactive Grid Pattern

Reactinteractive-grid-pattern

Reactinteractive-grid-pattern

Reactinteractive-grid-pattern

On this page