An interactive SVG grid pattern that responds to mouse hover, highlighting individual squares with smooth transitions.
Installation
import { InteractiveGridPattern } from "@/components/ui/interactive-grid-pattern"
export default function Example() {
return (
<div className="relative h-[500px] w-full overflow-hidden">
<InteractiveGridPattern />
</div>
)
}
Custom Colors
import { InteractiveGridPattern } from "@/components/ui/interactive-grid-pattern"
export default function Example() {
return (
<div className="relative h-[500px] w-full overflow-hidden">
<InteractiveGridPattern
squaresClassName="fill-blue-500/30 hover:fill-blue-500/50"
/>
</div>
)
}
| Prop | Type | Default | Description |
|---|
width | number | 40 | Width of each square in the grid |
height | number | 40 | Height of each square in the grid |
squares | [number, number] | [24, 24] | Number of squares [horizontal, vertical] |
className | string | - | Additional CSS classes for the grid container |
squaresClassName | string | - | Additional CSS classes for individual squares |
The component includes smooth transitions with different durations for hover and unhover states.
Use squaresClassName to customize the appearance of squares on hover using Tailwind classes.