# Grid Pattern

> SVG grid background with a radial mask and optional highlighted squares.

- Author: Atelier UI
- License: MIT
- Page: https://chromotion.dev/en/components/grid-pattern
- Site: Atelier UI (https://chromotion.dev)

## Install

```bash
npx shadcn@latest add https://chromotion.dev/r/grid-pattern.json
```

Stack: React + TypeScript + Tailwind CSS v4, shadcn/ui conventions. `cn` comes from `@/lib/utils`.

## Dependencies

No extra dependencies.

## Usage

```tsx title="components/grid-pattern-demo.tsx"
import { GridPattern } from "@/components/grid-pattern"

export default function GridPatternDemo() {
  return (
    <div className="relative flex min-h-svh items-center justify-center overflow-hidden bg-background">
      <GridPattern
        squares={[
          [4, 3],
          [6, 5],
          [9, 2],
          [11, 6],
          [13, 4],
          [7, 8],
        ]}
      />
      <p className="relative text-4xl font-semibold tracking-tight">Grid Pattern</p>
    </div>
  )
}
```

## Source

```tsx title="components/grid-pattern.tsx"
import * as React from "react"

import { cn } from "@/lib/utils"

export interface GridPatternProps extends React.ComponentProps<"svg"> {
  /** Cell size in px */
  size?: number
  /** Cells to fill, as [column, row] pairs */
  squares?: [number, number][]
  /** Fade the grid out towards the edges */
  masked?: boolean
}

export function GridPattern({
  size = 40,
  squares = [],
  masked = true,
  className,
  ...props
}: GridPatternProps) {
  const id = React.useId().replace(/[^\w-]/g, "")

  return (
    <svg
      aria-hidden
      className={cn(
        "pointer-events-none absolute inset-0 h-full w-full stroke-foreground/10",
        masked && "[mask-image:radial-gradient(ellipse_at_center,black_20%,transparent_70%)]",
        className
      )}
      {...props}
    >
      <defs>
        <pattern id={id} width={size} height={size} patternUnits="userSpaceOnUse">
          <path d={`M.5 ${size}V.5H${size}`} fill="none" />
        </pattern>
      </defs>
      <rect width="100%" height="100%" strokeWidth={0} fill={`url(#${id})`} />
      {squares.map(([x, y]) => (
        <rect
          key={`${x}-${y}`}
          x={x * size + 1}
          y={y * size + 1}
          width={size - 1}
          height={size - 1}
          strokeWidth={0}
          className="fill-foreground/[0.06]"
        />
      ))}
    </svg>
  )
}
```