Interactive Grid Pattern

PreviewCode

@/demos/InteractiveGridPatternDemo.tsx

import { cn } from '@/lib/utils'
import { InteractiveGridPattern } from '@/registry/magicui/interactive-grid-pattern'

export function InteractiveGridPatternDemo() {
  return (
    <div class="
      relative flex h-125 w-full flex-col items-center justify-center
      overflow-hidden rounded-lg border bg-background
    "
    >
      <InteractiveGridPattern
        class={cn(
          `mask-[radial-gradient(400px_circle_at_center,white,transparent)]`,
          'inset-x-0 inset-y-[-30%] h-[200%] skew-y-12',
        )}
      />
    </div>
  )
}

Installation

pnpm

pnpm dlx shadcn@latest add @magicui-solid/interactive-grid-pattern

bun

bunx shadcn@latest add @magicui-solid/interactive-grid-pattern

yarn

yarn dlx shadcn@latest add @magicui-solid/interactive-grid-pattern

npm

npx shadcn@latest add @magicui-solid/interactive-grid-pattern

Examples

Colorful

PreviewCode

@/demos/InteractiveGridPatternDemo2.tsx

import { cn } from '@/lib/utils'
import { InteractiveGridPattern } from '@/registry/magicui/interactive-grid-pattern'

export function InteractiveGridPatternDemo2() {
  return (
    <div class="
      relative flex h-125 w-full flex-col items-center justify-center
      overflow-hidden rounded-lg border bg-background
    "
    >
      <InteractiveGridPattern
        class={cn(
          `mask-[radial-gradient(400px_circle_at_center,white,transparent)]`,
        )}
        width={20}
        height={20}
        squares={[80, 80]}
        squaresClassName="hover:fill-blue-500"
      />
    </div>
  )
}

Usage

import { InteractiveGridPattern } from '@/components/magicui/interactive-grid-pattern'

<div className="relative h-[500px] w-full overflow-hidden">
  <InteractiveGridPattern />
</div>

Props

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 in the grid. First number is horizontal squares, second is vertical squares
class	string	-	Class name applied to the grid container
squaresClassName	string	-	Class name applied to individual squares in the grid

Original:

magicui.design/docs/components/interactive-grid-pattern