Dot Grid Background

Interactive dot-grid pattern with a glowing cursor-following effect.

npx uniqueui add dot-grid-background

Preview

Interactive Dots

Move your cursor around

Usage

import { DotGridBackground } from "@/components/ui/dot-grid-background";

export default function Example() {
  return (
    <div className="p-10 w-full text-white">
      <DotGridBackground className="rounded-xl h-[300px] flex items-center justify-center w-full">
        <div className="text-center z-10 w-full relative">
          <h3 className="text-2xl font-bold mb-2">Interactive Dots</h3>
          <p className="text-neutral-400">Move your cursor around</p>
        </div>
      </DotGridBackground>
    </div>
  );
}

Props

Prop	Type	Description
`children`	`React.ReactNode`	Components mapped into the z-index layer visually above the matrix.
`className`	`string`	Container abstraction classes.
`dotColor`	`string`	Color code controlling the default un-illuminated grid representation.
`dotSize`	`number`	Diameter specifying visual footprint density of single grid intersections.
`gap`	`number`	Vector translation pixel count separating independent grid items.
`hoverRadius`	`number`	Spread area around the cursor triggering focus interactions.
`hoverScale`	`number`	Float magnitude expanding intersections actively caught inside the hover bounds.