Interactive Grid Pattern

Docs

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

Installation

pnpm dlx shadcn@latest add "https://magicui.design/r/interactive-grid-pattern"

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

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

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

On This Page

Contribute