Dot Pattern

Motion

A dot or grid background drawn as one SVG pattern, faded at the edges, with an optional accent glow that follows the pointer and lights the dots beneath it.

src/registry/premium/dot-pattern.tsx/r/dot-pattern.json

Installation#

bash
npx shadcn@latest add https://ui.minidev.pro/r/dot-pattern.json

Usage#

tsx
import { DotPattern } from "@/components/ui/dot-pattern"

export function Example() {
  return <DotPattern />
}

API reference#

DotPattern props
PropTypeDefault
variant"dots" | "grid""dots"
gapnumber18
weightnumber1
glowbooleantrue
fadebooleantrue
classNamestring-
childrenReact.ReactNode-

Dependencies#

npm

motion

Built from

No other MiniDev files
All layout components