Animations

Grid Pattern

new

A static SVG grid for section backgrounds, with optional highlighted cells.

No projects yet

Create a project to connect a repository and start deploying.

Installation

npx shadcn@latest add @blank/grid-pattern

Usage

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

<div className="relative overflow-hidden">
  <GridPattern
    squares={[[4, 2], [7, 3]]}
    className="mask-radial-from-0% mask-radial-to-70%"
  />
</div>

The grid fills its nearest positioned parent. Lines use the border token and highlighted cells a faint wash of foreground, so it stays a texture in both themes. Recolor it with stroke-* and fill-* classes, and fade it with a mask utility rather than a prop.

Props

Prop	Type	Default
`width`	`number`	`40`
`height`	`number`	`40`
`x`	`number`	`-1`
`y`	`number`	`-1`
`squares`	`[number, number][]`	—
`strokeDasharray`	`string`	`"0"`