Introducing Remotion Hub Pro - 50+ blocks and templates to build beautiful landing pages in minutes.


Docs
Dot Pattern

Dot Pattern

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

Dot Pattern

Installation

Copy and paste the following code into your project.

components/magicui/dot-pattern.tsx
import { cn } from "@/lib/utils";
import { useId } from "react";
 
interface DotPatternProps {
  width?: any;
  height?: any;
  x?: any;
  y?: any;
  cx?: any;
  cy?: any;
  cr?: any;
  className?: string;
  [key: string]: any;
}
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>
  );
}
 
export default DotPattern;

Examples

Linear Gradient

Dot Pattern

Props

Dot Pattern

PropTypeDescriptionDefault
widthanyWidth of the dot pattern16
heightanyHeight of the dot pattern16
xanyX position of the dot0
yanyY position of the dot0
cxanyX position of the circle1
cyanyY position of the circle1
cranyRadius of the circle1
classNamestringClass name of the dot pattern-