Skip to main content

Documentation Index

Fetch the complete documentation index at: https://mintlify.com/Max-Samson/magicui/llms.txt

Use this file to discover all available pages before exploring further.

An interactive SVG grid pattern that responds to mouse hover, highlighting individual squares with smooth transitions.

​
Installation

    ​
    Usage

    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>
  )
}

    ​
    Props

    PropTypeDefaultDescription
    widthnumber40Width of each square in the grid
    heightnumber40Height of each square in the grid
    squares[number, number][24, 24]Number of squares [horizontal, vertical]
    classNamestring-Additional CSS classes for the grid container
    squaresClassNamestring-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.

    Build docs developers (and LLMs) love

    Get started for freeTalk to us