Interactive Grid Pattern

Getting Started

Templates

Components

Special Effects

Animations

Text Animations

Device Mocks

Buttons

Backgrounds

Community

Examples

Colorful

Open in

"use client"

import { cn } from "@/lib/utils"
import { InteractiveGridPattern } from "@/registry/magicui/interactive-grid-pattern"

export function InteractiveGridPatternDemo() {
  return (
    <div className="bg-background relative flex h-[500px] w-full flex-col items-center justify-center overflow-hidden rounded-lg border">
      <InteractiveGridPattern
        className={cn(
          "[mask-image:radial-gradient(400px_circle_at_center,white,transparent)]"
        )}
        width={20}
        height={20}
        squares={[80, 80]}
        squaresClassName="hover:fill-blue-500"
      />
    </div>
  )
}

Usage

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

<div className="relative h-[500px] w-full overflow-hidden">
  <InteractiveGridPattern />
</div>

Props

Prop	Type	Default	Description
`width`	`number`	`40`	Width of each square in the grid
`height`	`number`	`40`	Height of each square in the grid
`squares`	`[number, number]`	`[24,24]`	Number of squares in the grid. First number is horizontal squares, second is vertical squares
`className`	`string`	`-`	Class name applied to the grid container
`squaresClassName`	`string`	`-`	Class name applied to individual squares in the grid

Interactive Grid Pattern

Installation

Examples

Colorful

Usage

Props