---
title: Grid Pattern
description: An SVG grid background that fills its container and can highlight selected squares.
sidebar:
  badge: Astro
---

```astro
---
import { GridPattern } from "@/components/patterns/grid-pattern"
---

<div class="bg-background relative flex h-72 w-full items-center justify-center overflow-hidden rounded-lg border">
  <GridPattern />
  <p class="relative z-10 text-sm font-medium">Grid pattern</p>
</div>
```

## Installation

```bash
bunx --bun shadcn@latest add @gnosticai/grid-pattern
```

## Usage

Place the pattern inside a positioned parent. The SVG uses `absolute inset-0`
and fills that parent.

```ts
import { GridPattern } from "@/components/patterns/grid-pattern"
```

```astro
<div class="relative h-72 overflow-hidden">
  <GridPattern />
</div>
```

## Examples

### Highlighted squares

`squares` accepts `[column, row]` pairs. Each pair fills one cell.

```astro
---
import { GridPattern } from "@/components/patterns/grid-pattern"

const squares: Array<[number, number]> = [
  [1, 1],
  [2, 3],
  [4, 2],
  [6, 1],
  [7, 3],
]
---

<div class="bg-background relative flex h-72 w-full items-center justify-center overflow-hidden rounded-lg border">
  <GridPattern squares={squares} />
  <p class="relative z-10 text-sm font-medium">Highlighted squares</p>
</div>
```

### Dashed lines

Set `strokeDasharray` to change the grid stroke. `"0"` draws a solid line.

```astro
---
import { GridPattern } from "@/components/patterns/grid-pattern"
---

<div class="bg-background relative flex h-72 w-full items-center justify-center overflow-hidden rounded-lg border">
  <GridPattern strokeDasharray="4 2" />
  <p class="relative z-10 text-sm font-medium">Dashed grid</p>
</div>
```

## API Reference

| Prop | Default | Description |
| --- | --- | --- |
| `width` | `60` | Width of one grid square, in user units. |
| `height` | `60` | Height of one grid square, in user units. |
| `x` | `-1` | Horizontal offset of the pattern. |
| `y` | `-1` | Vertical offset of the pattern. |
| `squares` | — | Cells to fill, as `[column, row]` pairs. |
| `strokeDasharray` | `"0"` | SVG stroke dash array for the grid lines. |
| `class` | — | Extra classes on the root SVG. |

The default color uses `fill-muted-foreground/30` and `stroke-muted-foreground/30`.
Pass `class` to change the color.

See the [registry source](/r/grid-pattern.json) for the component source.