Grid Pattern

Docs

Grid Pattern

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

Installation

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

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

Prop	Type	Default	Description
`width`	`number`	`40`	Width of the pattern
`height`	`number`	`40`	Height of the pattern
`x`	`number`	`-1`	X offset of the pattern
`y`	`number`	`-1`	Y offset of the pattern
`squares`	`number`	`[]`	X Y coordinates of filled squares as 2D array
`strokeDasharray`	`string`	`0`	Stroke dash array for the pattern

Contribute