Grid Pattern
Subtle animated CSS grid lines background
Installation
Usage
import { GridPatternBackground } from "@/components/pioneerui/grid-pattern"
export default function Page() {
return (
<GridPatternBackground
squares={[[2, 2], [4, 3], [6, 1]]}
>
<h1>Your content</h1>
</GridPatternBackground>
)
}Props — GridPattern
| Prop | Type | Default | Description |
|---|---|---|---|
width | number | 40 | Grid cell width in px |
height | number | 40 | Grid cell height in px |
squares | [x, y][] | undefined | Highlighted cell coordinates |
className | string | undefined | SVG class (use for mask, color) |