Dot Pattern

featurefrom MagicUI Effects

Dot Pattern

AI Usage Rules

Use DotPattern as a subtle background texture. Place inside a relative container. Adjust width/height for dot spacing, cr for dot size. Use with a gradient mask for fade effects.

Code Template

import { useId } from "react"
import { cn } from "@/lib/utils"

interface DotPatternProps extends React.ComponentProps<"svg"> {
  width?: number
  height?: number
  x?: number
  y?: number
  cx?: number
  cy?: number
  cr?: number
}

export function DotPattern({ width = 16, height = 16, x = 0, y = 0, cx = 1, cy = 1, cr = 1, className, ...props }: DotPatternProps) {
  const id = useId()
  return (
    <svg aria-hidden="true" className={cn("pointer-events-none absolute inset-0 h-full w-full fill-neutral-400/80", className)} {...props}>
      <defs>
        <pattern id={id} width={width} height={height} patternUnits="userSpaceOnUse" patternContentUnits="userSpaceOnUse" x={x} y={y}>
          <circle id="pattern-circle" cx={cx} cy={cy} r={cr} />
        </pattern>
      </defs>
      <rect width="100%" height="100%" strokeWidth={0} fill={`url(#${id})`} />
    </svg>
  )
}

Props Schema

Property	Type	Default
cr	number	—
width	number	—
height	number	—

View raw JSON schema

{
  "type": "object",
  "properties": {
    "cr": {
      "type": "number"
    },
    "width": {
      "type": "number"
    },
    "height": {
      "type": "number"
    }
  }
}