Shadcn.io is not affiliated with official shadcn/ui
React Interactive Grid Pattern Background
Interactive grid where cells glow on hover with proximity-based highlighting and smooth trailing effects
This takes a basic grid pattern and makes it interactive. Hover over a cell and it glows cyan instantly, then fades out slowly when you leave—so you get this trailing glow effect as you move around. What makes it extra nice is the proximity highlighting: cells near your cursor get a subtle highlight based on how close they are, creating a soft spotlight effect. The grid auto-sizes based on your viewport and rescales on resize. Great for tech dashboards, portfolios, or anywhere you want that responsive, reactive feel.
React Interactive Grid Pattern Background preview
Installation
Related Components
Grid Pattern
Static SVG grid
Hexagon Background
Honeycomb grid
Background Boxes
Isometric box grid
Dot Pattern
Interactive dot grid
Flickering Grid
Animated matrix grid
Retro Grid
80s perspective grid
FAQ
Was this page helpful?
Sign in to leave feedback.