Interactive Grid Pattern

Dynamic grid backgrounds that respond to user interaction. Perfect for React dashboards and Next.js applications where subtle animation enhances the user experience without distraction.

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

Hover-responsive grid cells that illuminate on interaction with smooth CSS transitions
SVG-based rendering ensuring vector precision and scalability at any screen resolution
Customizable grid parameters including cell dimensions and overall grid density
Performance optimized using minimal DOM manipulation for smooth 60fps interactions
TypeScript support with comprehensive type definitions for reliable integration
Accessibility features including proper ARIA attributes for inclusive user experiences
Tailwind CSS integration enabling seamless styling with existing design systems
Responsive design adapting automatically to container dimensions and device sizes

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

Brand-specific color schemes that maintain visual consistency while adding interactive delight.

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

Demonstrate the versatility of geometric patterns across different design contexts and use cases.

Ideal Applications

Data Dashboards → Subtle background activity that doesn't compete with chart visualizations

Portfolio Layouts → Professional geometric structure that enhances content presentation

Admin Interfaces → Clean, organized appearance that reinforces system reliability

Creative Showcases → Artistic grid foundations that complement visual work without interference

JavaScript Documentation → Technical precision that appeals to developer audiences

Landing Page Sections → Sophisticated backgrounds that guide attention to key content areas

SaaS Applications → Modern, systematic design language that conveys technical competence

Perfect for React applications where professional aesthetics matter as much as functionality.

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

Design Intelligence

Visual Hierarchy Control

Strategic grid density creates structure without overwhelming content. Adjust cell dimensions to complement your information architecture.

Interactive Feedback Systems

Subtle hover states provide user engagement feedback while maintaining focus on primary content areas.

Performance Engineering

Efficient SVG rendering - Single SVG element with minimal DOM nodes for smooth interactions

Smart state management - React useState tracks only active hover states to minimize re-renders

Transition optimization - CSS transitions handle visual changes without JavaScript animation overhead

Styling Flexibility

Mask-based effects - Radial gradients create spotlight illumination patterns

Transform compatibility - Perspective effects (skew-y-12) add dimensional depth

Color psychology - Custom hover states express brand personality through interaction

Responsive adaptation - Grid scales intelligently across device sizes

Advanced Implementation

Leverage geometric patterns as foundations for complex layouts. The grid provides visual anchoring that helps users navigate information hierarchies intuitively.

Interactive Grid Pattern

Reactinteractive-grid-pattern

Reactinteractive-grid-pattern

Reactinteractive-grid-pattern

On this page