Grid Pattern
An SVG grid background that fills its container and can highlight selected squares.
---
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
bunx --bun shadcn@latest add @gnosticai/grid-patternUsage
Place the pattern inside a positioned parent. The SVG uses absolute inset-0
and fills that parent.
import { GridPattern } from "@/components/patterns/grid-pattern"<div class="relative h-72 overflow-hidden">
<GridPattern />
</div>Examples
Highlighted squares
squares accepts [column, row] pairs. Each pair fills one cell.
---
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.
---
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 for the component source.