React Interactive Grid Pattern

Grid backgrounds that light up on hover like Tron. Build responsive React grids with smooth hover effects, TypeScript support, and 60fps performance for Next.js dashboards with shadcn/ui integration.

React

Trying to implement interactive grids?

Join our Discord community for help from other developers.

Static grids are boring. CSS-only grids can't track state. You need a grid that responds to users without killing performance. This React component creates an SVG grid where each cell lights up on hover, running at 60fps even with thousands of cells.

Interactive hover effects

Watch grid cells illuminate as you move your cursor:

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 };

Built for React and Next.js with full TypeScript support. The grid uses a single SVG element with minimal DOM manipulation, so hover effects stay smooth even on lower-end devices. Works perfectly with shadcn/ui design systems.

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

Usage

import { InteractiveGridPattern } from "@/components/ui/interactive-grid-pattern";

export default function Dashboard() {
  return (
    <div className="relative h-screen">
      <InteractiveGridPattern 
        className="absolute inset-0"
        squares={[20, 20]}
      />
      <div className="relative z-10">
        {/* Your content */}
      </div>
    </div>
  );
}

Why most interactive grids suck

Most developers create a div for each cell. Bad move. 400 cells = 400 DOM nodes = sluggish interactions. Others use canvas, which means managing a whole rendering context for what should be a simple hover effect.

This React component uses a single SVG with rect elements. Hover state is tracked with React's useState, but only for active cells. CSS transitions handle the visual changes. Result? Butter-smooth interactions even with 1000+ cells.

Examples

Colorful Hover Effects

Grid with vibrant colors that match your brand:

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

Different grid styles for various use cases:

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 };

Features

Single SVG rendering for thousands of cells without performance penalty
React state tracking only for hovered cells
CSS transition animations running at 60fps
TypeScript definitions for proper IDE support in React projects
Customizable grid density with width/height props
Responsive scaling that adapts to container size
Radial gradient masking for spotlight effects
shadcn/ui compatible using Tailwind CSS classes

API Reference

InteractiveGridPattern

Main grid component that handles hover interactions.

Prop	Type	Default	Description
`className`	`string`	-	Additional Tailwind CSS classes for SVG
`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]`	Grid dimensions [columns, rows]
`squaresClassName`	`string`	-	Classes for interactive square elements

Common gotchas

Too many cells: More than 50x50 grid starts impacting performance. Keep it reasonable—users can't distinguish individual cells beyond that anyway.

Z-index layering: Content needs relative z-10 to appear above the grid. The SVG uses absolute positioning.

Mobile performance: Touch devices don't have hover, so the effect is lost. Consider disabling on mobile or using touch events instead.

Color contrast: Light hover effects get lost on light backgrounds. Use sufficient opacity or color contrast for visibility.

Container sizing: The grid fills its container. Make sure the parent has explicit dimensions or the grid won't render.

Integration with other components

Perfect under Particles for layered effects. Combines well with Gradient for depth. The grid is subtle enough to work behind any shadcn/ui component without competing for attention.

React Interactive Grid Pattern

Interactive hover effects

Installation

Usage

Why most interactive grids suck

Examples

Colorful Hover Effects

Multiple Variants

Features

API Reference

InteractiveGridPattern

Common gotchas

Integration with other components

Questions developers actually ask

On this page

React Interactive Grid Pattern

Reactinteractive-grid-pattern

Reactinteractive-grid-pattern

Reactinteractive-grid-pattern

How do I change the hover color?

Can I add click handlers to cells?

What's the maximum grid size?

How do I speed up the hover animation?

Can I make hexagonal or triangular grids?

How do I create a spotlight follow effect?

On this page