A simple and customizable SVG grid pattern that can be used as a background element with optional filled squares.
Installation
import { GridPattern } from "@/components/ui/grid-pattern"
export default function Example() {
return (
<div className="relative h-[500px] w-full overflow-hidden">
<GridPattern />
</div>
)
}
With Filled Squares
import { GridPattern } from "@/components/ui/grid-pattern"
export default function Example() {
return (
<div className="relative h-[500px] w-full overflow-hidden">
<GridPattern
squares={[
[0, 1],
[1, 3],
[3, 0],
[4, 4],
]}
/>
</div>
)
}
Dashed Stroke
import { GridPattern } from "@/components/ui/grid-pattern"
export default function Example() {
return (
<div className="relative h-[500px] w-full overflow-hidden">
<GridPattern strokeDasharray="4 2" />
</div>
)
}
| Prop | Type | Default | Description |
|---|
width | number | 40 | Width of each grid cell |
height | number | 40 | Height of each grid cell |
x | number | -1 | X offset of the pattern |
y | number | -1 | Y offset of the pattern |
squares | Array<[number, number]> | - | Array of [x, y] coordinates for filled squares |
strokeDasharray | string | "0" | Stroke dash array for the grid lines |
className | string | - | Additional CSS classes for the SVG element |
Use the squares prop to highlight specific grid cells by providing their coordinates as 2D arrays.