Interactive Grid Pattern

Docs

A interactive background grid pattern made with SVGs, fully customizable using Tailwind CSS.

Installation

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

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

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

Contribute