Interactive Grid Pattern
Interactive SVG grid background component for React and Next.js applications. Built with TypeScript support, Tailwind CSS styling, and shadcn/ui design featuring hover effects, customizable dimensions, and responsive layouts.
Powered by
Preview Error
Could not load preview for: interactive-grid-pattern
Error details
Error: ENOENT: no such file or directory, open '/app/apps/docs/examples/interactive-grid-pattern.tsx'
Installation
npx shadcn@latest add https://www.shadcn.io/registry/interactive-grid-pattern.jsonnpx shadcn@latest add https://www.shadcn.io/registry/interactive-grid-pattern.jsonpnpm dlx shadcn@latest add https://www.shadcn.io/registry/interactive-grid-pattern.jsonbunx shadcn@latest add https://www.shadcn.io/registry/interactive-grid-pattern.jsonFeatures
- Interactive hover effects - Grid squares respond to mouse enter/leave events using JavaScript
- SVG-based rendering - Crisp scaling at any resolution with minimal DOM impact for React apps
- Tailwind CSS integration - Complete styling control with utility classes for Next.js projects
- Customizable dimensions - Control grid size, cell dimensions, and interactive areas using TypeScript props
- Performance optimized - Efficient rendering with minimal DOM nodes and smooth animations
- Accessible design - Proper aria-hidden markup for decorative backgrounds using shadcn/ui patterns
- Open source - Free interactive grid component with transform and mask support
Examples
Colorful Hover Effects
Preview Error
Could not load preview for: interactive-grid-pattern-colorful
Error details
Error: ENOENT: no such file or directory, open '/app/apps/docs/examples/interactive-grid-pattern-colorful.tsx'
Multiple Variants
Preview Error
Could not load preview for: interactive-grid-pattern-variants
Error details
Error: ENOENT: no such file or directory, open '/app/apps/docs/examples/interactive-grid-pattern-variants.tsx'
Use Cases
- Hero backgrounds - Interactive grid overlays for landing page sections
- Dashboard layouts - Subtle background patterns with hover feedback
- Portfolio sites - Creative grid effects for design showcases
- App interfaces - Decorative backgrounds with responsive interaction
API Reference
InteractiveGridPattern Props
| Prop | Type | Default | Description |
|---|---|---|---|
className | string | - | Additional CSS classes for the SVG element |
width | number | 40 | Width of each grid cell in pixels |
height | number | 40 | Height of each grid cell in pixels |
squares | [number, number] | [24, 24] | Number of squares [horizontal, vertical] |
squaresClassName | string | - | CSS classes applied to interactive squares |
Implementation
SVG-based with mouse event handlers on individual squares. Use squaresClassName for hover effects. Supports CSS transforms and mask-image for advanced effects. Marked as decorative for accessibility.
Glimpse
URL preview hover component for React and Next.js applications. Built with TypeScript support, Tailwind CSS styling, and shadcn/ui design featuring server-side data fetching, smooth transitions, and mobile accessibility.
Particles
Interactive particle animation component for React and Next.js applications. Built with TypeScript support, HTML5 Canvas, and Tailwind CSS styling featuring mouse interaction, customizable behavior, and performance optimization.