Grid Pattern

A lightweight SVG grid background with optional highlighted cells.

Grid Pattern

Installation#

pnpm dlx shadcn@latest add https://ui.balick.me/r/grid-pattern.json

Or, with the namespace configured: @balick/grid-pattern

Usage#

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

export function Background() {
  return (
    <div className="relative h-96 overflow-hidden">
      <GridPattern squares={[[2, 3], [5, 1]]} />
    </div>
  )
}

Props#

Prop	Type	Default	Description
`width` Width of a cell, in pixels.	`number`	40	Width of a cell, in pixels.
`height` Height of a cell, in pixels.	`number`	40	Height of a cell, in pixels.
`x` Horizontal offset of the pattern.	`number`	-1	Horizontal offset of the pattern.
`y` Vertical offset of the pattern.	`number`	-1	Vertical offset of the pattern.
`strokeDasharray` Dash pattern of the lines, e.g. "4 2".	`string`	"0"	Dash pattern of the lines, e.g. "4 2".
`squares` Cells to fill, as [column, row] pairs.	`Array<[number, number]>`	—	Cells to fill, as [column, row] pairs.