Dot Pattern

Docs

Dot Pattern

A background dot pattern made with SVGs, fully customizable using Tailwind CSS.

Installation

import { DotPattern } from "@/components/magicui/dot-pattern";

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

Prop	Type	Default	Description
`width`	`any`	`16`	Width of the dot pattern
`height`	`any`	`16`	Height of the dot pattern
`x`	`any`	`0`	X position of the dot
`y`	`any`	`0`	Y position of the dot
`cx`	`any`	`1`	X position of the circle
`cy`	`any`	`1`	Y position of the circle
`cr`	`any`	`1`	Radius of the circle
`className`	`string`	`-`	Class name of the dot pattern
`glow`	`boolean`	`false`	Activates the glow effect in the dot pattern

Contribute