React Background Dot Pattern

Minimalist dot grids that pulse like a heartbeat monitor. Build elegant React backgrounds with SVG patterns, optional glow effects, TypeScript support, and gradient masking for Next.js applications with shadcn/ui.

Motion

React

Trying to implement dot patterns?

Join our Discord community for help from other developers.

Dots. The most basic visual element, yet somehow the hardest to get right. Too big and they're distracting. Too small and they disappear. This React component nails the balance—clean SVG dots that can glow, fade, or just sit there looking professional.

Minimalist dot grid

Clean, structured patterns that know their place:

Loading component...

"use client";import { cn } from "@/lib/utils";import { motion } from "motion/react";import React, { useEffect, useId, useRef, useState } from "react";/** *  DotPattern Component Props * * @param {number} [width=16] - The horizontal spacing between dots * @param {number} [height=16] - The vertical spacing between dots * @param {number} [x=0] - The x-offset of the entire pattern * @param {number} [y=0] - The y-offset of the entire pattern * @param {number} [cx=1] - The x-offset of individual dots * @param {number} [cy=1] - The y-offset of individual dots * @param {number} [cr=1] - The radius of each dot * @param {string} [className] - Additional CSS classes to apply to the SVG container * @param {boolean} [glow=false] - Whether dots should have a glowing animation effect */interface DotPatternProps extends React.SVGProps<SVGSVGElement> {  width?: number;  height?: number;  x?: number;  y?: number;  cx?: number;  cy?: number;  cr?: number;  className?: string;  glow?: boolean;  [key: string]: unknown;}/** * DotPattern Component * * A React component that creates an animated or static dot pattern background using SVG. * The pattern automatically adjusts to fill its container and can optionally display glowing dots. * * @component * * @see DotPatternProps for the props interface. * * @example * // Basic usage * <DotPattern /> * * // With glowing effect and custom spacing * <DotPattern *   width={20} *   height={20} *   glow={true} *   className="opacity-50" * /> * * @notes * - The component is client-side only ("use client") * - Automatically responds to container size changes * - When glow is enabled, dots will animate with random delays and durations * - Uses Motion for animations * - Dots color can be controlled via the text color utility classes */export function DotPattern({  width = 16,  height = 16,  x = 0,  y = 0,  cx = 1,  cy = 1,  cr = 1,  className,  glow = false,  ...props}: DotPatternProps) {  const id = useId();  const containerRef = useRef<SVGSVGElement>(null);  const [dimensions, setDimensions] = useState({ width: 0, height: 0 });  useEffect(() => {    const updateDimensions = () => {      if (containerRef.current) {        const { width, height } = containerRef.current.getBoundingClientRect();        setDimensions({ width, height });      }    };    updateDimensions();    window.addEventListener("resize", updateDimensions);    return () => window.removeEventListener("resize", updateDimensions);  }, []);  const dots = Array.from(    {      length:        Math.ceil(dimensions.width / width) *        Math.ceil(dimensions.height / height),    },    (_, i) => {      const col = i % Math.ceil(dimensions.width / width);      const row = Math.floor(i / Math.ceil(dimensions.width / width));      return {        x: col * width + cx,        y: row * height + cy,        delay: Math.random() * 5,        duration: Math.random() * 3 + 2,      };    },  );  return (    <svg      ref={containerRef}      aria-hidden="true"      className={cn(        "pointer-events-none absolute inset-0 h-full w-full",        className,      )}      {...props}    >      <defs>        <radialGradient id={`${id}-gradient`}>          <stop offset="0%" stopColor="currentColor" stopOpacity="1" />          <stop offset="100%" stopColor="currentColor" stopOpacity="0" />        </radialGradient>      </defs>      {dots.map((dot, index) => (        <motion.circle          key={`${dot.x}-${dot.y}`}          cx={dot.x}          cy={dot.y}          r={cr}          fill={glow ? `url(#${id}-gradient)` : "currentColor"}          className="text-neutral-400/80"          initial={glow ? { opacity: 0.4, scale: 1 } : {}}          animate={            glow              ? {                  opacity: [0.4, 1, 0.4],                  scale: [1, 1.5, 1],                }              : {}          }          transition={            glow              ? {                  duration: dot.duration,                  repeat: Infinity,                  repeatType: "reverse",                  delay: dot.delay,                  ease: "easeInOut",                }              : {}          }        />      ))}    </svg>  );}export type { DotPatternProps };

Built for React applications with TypeScript and Next.js. Each dot is an SVG circle, so they stay crisp at any resolution. Add the glow prop and watch them pulse with randomized timing, like a field of fireflies that actually respect your CPU.

Installation

npx shadcn@latest add https://www.shadcn.io/registry/dot-pattern.json

npx shadcn@latest add https://www.shadcn.io/registry/dot-pattern.json

pnpm dlx shadcn@latest add https://www.shadcn.io/registry/dot-pattern.json

bunx shadcn@latest add https://www.shadcn.io/registry/dot-pattern.json

Usage

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

export default function Hero() {
  return (
    <div className="relative h-screen">
      <DotPattern 
        className="absolute inset-0 text-neutral-400/40"
        width={20}
        height={20}
        glow={true}
      />
      <div className="relative z-10">
        <h1>Your content here</h1>
      </div>
    </div>
  );
}

Why most dot patterns look amateur

Most developers use repeated background images or CSS gradients. The dots look blurry on retina displays, can't be animated, and definitely can't respond to your design system. Some try canvas, but that's overkill for dots.

This React component uses SVG patterns—infinitely scalable, perfectly aligned, and styleable with Tailwind classes. Want glowing dots? Add the glow prop. Want them to fade at the edges? Slap on a mask-image. The dots adapt to their container automatically, no measuring required.

Examples

Linear Gradient Mask

Dots that fade into the distance with gradient masking:

Loading component...

"use client";import { cn } from "@/lib/utils";import { motion } from "motion/react";import React, { useEffect, useId, useRef, useState } from "react";/** *  DotPattern Component Props * * @param {number} [width=16] - The horizontal spacing between dots * @param {number} [height=16] - The vertical spacing between dots * @param {number} [x=0] - The x-offset of the entire pattern * @param {number} [y=0] - The y-offset of the entire pattern * @param {number} [cx=1] - The x-offset of individual dots * @param {number} [cy=1] - The y-offset of individual dots * @param {number} [cr=1] - The radius of each dot * @param {string} [className] - Additional CSS classes to apply to the SVG container * @param {boolean} [glow=false] - Whether dots should have a glowing animation effect */interface DotPatternProps extends React.SVGProps<SVGSVGElement> {  width?: number;  height?: number;  x?: number;  y?: number;  cx?: number;  cy?: number;  cr?: number;  className?: string;  glow?: boolean;  [key: string]: unknown;}/** * DotPattern Component * * A React component that creates an animated or static dot pattern background using SVG. * The pattern automatically adjusts to fill its container and can optionally display glowing dots. * * @component * * @see DotPatternProps for the props interface. * * @example * // Basic usage * <DotPattern /> * * // With glowing effect and custom spacing * <DotPattern *   width={20} *   height={20} *   glow={true} *   className="opacity-50" * /> * * @notes * - The component is client-side only ("use client") * - Automatically responds to container size changes * - When glow is enabled, dots will animate with random delays and durations * - Uses Motion for animations * - Dots color can be controlled via the text color utility classes */export function DotPattern({  width = 16,  height = 16,  x = 0,  y = 0,  cx = 1,  cy = 1,  cr = 1,  className,  glow = false,  ...props}: DotPatternProps) {  const id = useId();  const containerRef = useRef<SVGSVGElement>(null);  const [dimensions, setDimensions] = useState({ width: 0, height: 0 });  useEffect(() => {    const updateDimensions = () => {      if (containerRef.current) {        const { width, height } = containerRef.current.getBoundingClientRect();        setDimensions({ width, height });      }    };    updateDimensions();    window.addEventListener("resize", updateDimensions);    return () => window.removeEventListener("resize", updateDimensions);  }, []);  const dots = Array.from(    {      length:        Math.ceil(dimensions.width / width) *        Math.ceil(dimensions.height / height),    },    (_, i) => {      const col = i % Math.ceil(dimensions.width / width);      const row = Math.floor(i / Math.ceil(dimensions.width / width));      return {        x: col * width + cx,        y: row * height + cy,        delay: Math.random() * 5,        duration: Math.random() * 3 + 2,      };    },  );  return (    <svg      ref={containerRef}      aria-hidden="true"      className={cn(        "pointer-events-none absolute inset-0 h-full w-full",        className,      )}      {...props}    >      <defs>        <radialGradient id={`${id}-gradient`}>          <stop offset="0%" stopColor="currentColor" stopOpacity="1" />          <stop offset="100%" stopColor="currentColor" stopOpacity="0" />        </radialGradient>      </defs>      {dots.map((dot, index) => (        <motion.circle          key={`${dot.x}-${dot.y}`}          cx={dot.x}          cy={dot.y}          r={cr}          fill={glow ? `url(#${id}-gradient)` : "currentColor"}          className="text-neutral-400/80"          initial={glow ? { opacity: 0.4, scale: 1 } : {}}          animate={            glow              ? {                  opacity: [0.4, 1, 0.4],                  scale: [1, 1.5, 1],                }              : {}          }          transition={            glow              ? {                  duration: dot.duration,                  repeat: Infinity,                  repeatType: "reverse",                  delay: dot.delay,                  ease: "easeInOut",                }              : {}          }        />      ))}    </svg>  );}export type { DotPatternProps };

Glow Effect

Pulsing dots with randomized timing for organic movement:

Loading component...

"use client";import { cn } from "@/lib/utils";import { motion } from "motion/react";import React, { useEffect, useId, useRef, useState } from "react";/** *  DotPattern Component Props * * @param {number} [width=16] - The horizontal spacing between dots * @param {number} [height=16] - The vertical spacing between dots * @param {number} [x=0] - The x-offset of the entire pattern * @param {number} [y=0] - The y-offset of the entire pattern * @param {number} [cx=1] - The x-offset of individual dots * @param {number} [cy=1] - The y-offset of individual dots * @param {number} [cr=1] - The radius of each dot * @param {string} [className] - Additional CSS classes to apply to the SVG container * @param {boolean} [glow=false] - Whether dots should have a glowing animation effect */interface DotPatternProps extends React.SVGProps<SVGSVGElement> {  width?: number;  height?: number;  x?: number;  y?: number;  cx?: number;  cy?: number;  cr?: number;  className?: string;  glow?: boolean;  [key: string]: unknown;}/** * DotPattern Component * * A React component that creates an animated or static dot pattern background using SVG. * The pattern automatically adjusts to fill its container and can optionally display glowing dots. * * @component * * @see DotPatternProps for the props interface. * * @example * // Basic usage * <DotPattern /> * * // With glowing effect and custom spacing * <DotPattern *   width={20} *   height={20} *   glow={true} *   className="opacity-50" * /> * * @notes * - The component is client-side only ("use client") * - Automatically responds to container size changes * - When glow is enabled, dots will animate with random delays and durations * - Uses Motion for animations * - Dots color can be controlled via the text color utility classes */export function DotPattern({  width = 16,  height = 16,  x = 0,  y = 0,  cx = 1,  cy = 1,  cr = 1,  className,  glow = false,  ...props}: DotPatternProps) {  const id = useId();  const containerRef = useRef<SVGSVGElement>(null);  const [dimensions, setDimensions] = useState({ width: 0, height: 0 });  useEffect(() => {    const updateDimensions = () => {      if (containerRef.current) {        const { width, height } = containerRef.current.getBoundingClientRect();        setDimensions({ width, height });      }    };    updateDimensions();    window.addEventListener("resize", updateDimensions);    return () => window.removeEventListener("resize", updateDimensions);  }, []);  const dots = Array.from(    {      length:        Math.ceil(dimensions.width / width) *        Math.ceil(dimensions.height / height),    },    (_, i) => {      const col = i % Math.ceil(dimensions.width / width);      const row = Math.floor(i / Math.ceil(dimensions.width / width));      return {        x: col * width + cx,        y: row * height + cy,        delay: Math.random() * 5,        duration: Math.random() * 3 + 2,      };    },  );  return (    <svg      ref={containerRef}      aria-hidden="true"      className={cn(        "pointer-events-none absolute inset-0 h-full w-full",        className,      )}      {...props}    >      <defs>        <radialGradient id={`${id}-gradient`}>          <stop offset="0%" stopColor="currentColor" stopOpacity="1" />          <stop offset="100%" stopColor="currentColor" stopOpacity="0" />        </radialGradient>      </defs>      {dots.map((dot, index) => (        <motion.circle          key={`${dot.x}-${dot.y}`}          cx={dot.x}          cy={dot.y}          r={cr}          fill={glow ? `url(#${id}-gradient)` : "currentColor"}          className="text-neutral-400/80"          initial={glow ? { opacity: 0.4, scale: 1 } : {}}          animate={            glow              ? {                  opacity: [0.4, 1, 0.4],                  scale: [1, 1.5, 1],                }              : {}          }          transition={            glow              ? {                  duration: dot.duration,                  repeat: Infinity,                  repeatType: "reverse",                  delay: dot.delay,                  ease: "easeInOut",                }              : {}          }        />      ))}    </svg>  );}export type { DotPatternProps };

Custom Configuration

Fine-tuned spacing and sizing for specific design needs:

Loading component...

"use client";import { cn } from "@/lib/utils";import { motion } from "motion/react";import React, { useEffect, useId, useRef, useState } from "react";/** *  DotPattern Component Props * * @param {number} [width=16] - The horizontal spacing between dots * @param {number} [height=16] - The vertical spacing between dots * @param {number} [x=0] - The x-offset of the entire pattern * @param {number} [y=0] - The y-offset of the entire pattern * @param {number} [cx=1] - The x-offset of individual dots * @param {number} [cy=1] - The y-offset of individual dots * @param {number} [cr=1] - The radius of each dot * @param {string} [className] - Additional CSS classes to apply to the SVG container * @param {boolean} [glow=false] - Whether dots should have a glowing animation effect */interface DotPatternProps extends React.SVGProps<SVGSVGElement> {  width?: number;  height?: number;  x?: number;  y?: number;  cx?: number;  cy?: number;  cr?: number;  className?: string;  glow?: boolean;  [key: string]: unknown;}/** * DotPattern Component * * A React component that creates an animated or static dot pattern background using SVG. * The pattern automatically adjusts to fill its container and can optionally display glowing dots. * * @component * * @see DotPatternProps for the props interface. * * @example * // Basic usage * <DotPattern /> * * // With glowing effect and custom spacing * <DotPattern *   width={20} *   height={20} *   glow={true} *   className="opacity-50" * /> * * @notes * - The component is client-side only ("use client") * - Automatically responds to container size changes * - When glow is enabled, dots will animate with random delays and durations * - Uses Motion for animations * - Dots color can be controlled via the text color utility classes */export function DotPattern({  width = 16,  height = 16,  x = 0,  y = 0,  cx = 1,  cy = 1,  cr = 1,  className,  glow = false,  ...props}: DotPatternProps) {  const id = useId();  const containerRef = useRef<SVGSVGElement>(null);  const [dimensions, setDimensions] = useState({ width: 0, height: 0 });  useEffect(() => {    const updateDimensions = () => {      if (containerRef.current) {        const { width, height } = containerRef.current.getBoundingClientRect();        setDimensions({ width, height });      }    };    updateDimensions();    window.addEventListener("resize", updateDimensions);    return () => window.removeEventListener("resize", updateDimensions);  }, []);  const dots = Array.from(    {      length:        Math.ceil(dimensions.width / width) *        Math.ceil(dimensions.height / height),    },    (_, i) => {      const col = i % Math.ceil(dimensions.width / width);      const row = Math.floor(i / Math.ceil(dimensions.width / width));      return {        x: col * width + cx,        y: row * height + cy,        delay: Math.random() * 5,        duration: Math.random() * 3 + 2,      };    },  );  return (    <svg      ref={containerRef}      aria-hidden="true"      className={cn(        "pointer-events-none absolute inset-0 h-full w-full",        className,      )}      {...props}    >      <defs>        <radialGradient id={`${id}-gradient`}>          <stop offset="0%" stopColor="currentColor" stopOpacity="1" />          <stop offset="100%" stopColor="currentColor" stopOpacity="0" />        </radialGradient>      </defs>      {dots.map((dot, index) => (        <motion.circle          key={`${dot.x}-${dot.y}`}          cx={dot.x}          cy={dot.y}          r={cr}          fill={glow ? `url(#${id}-gradient)` : "currentColor"}          className="text-neutral-400/80"          initial={glow ? { opacity: 0.4, scale: 1 } : {}}          animate={            glow              ? {                  opacity: [0.4, 1, 0.4],                  scale: [1, 1.5, 1],                }              : {}          }          transition={            glow              ? {                  duration: dot.duration,                  repeat: Infinity,                  repeatType: "reverse",                  delay: dot.delay,                  ease: "easeInOut",                }              : {}          }        />      ))}    </svg>  );}export type { DotPatternProps };

Features

SVG-based rendering for infinite scalability and crisp dots
Randomized glow animations creating organic pulsing effects
Gradient mask support for directional fades and focus areas
Container-aware sizing automatically adapting to parent dimensions
TypeScript definitions for all props and configurations
Tailwind color control using text utilities for dot colors
Performance optimized with proper memoization
shadcn/ui compatible following design system patterns

API Reference

DotPattern

Main component for rendering the dot pattern.

Prop	Type	Default	Description
`width`	`number`	`16`	Horizontal spacing between dots (pixels)
`height`	`number`	`16`	Vertical spacing between dots (pixels)
`x`	`number`	`0`	Pattern X-offset
`y`	`number`	`0`	Pattern Y-offset
`cx`	`number`	`1`	Individual dot X-offset within cell
`cy`	`number`	`1`	Individual dot Y-offset within cell
`cr`	`number`	`1`	Dot radius (pixels)
`glow`	`boolean`	`false`	Enable pulsing glow animation
`className`	`string`	-	Tailwind classes for styling

Common gotchas

Color opacity matters: Use Tailwind's opacity modifier like text-neutral-400/40. Without opacity, dots can overwhelm your content.

Container sizing: The pattern fills its container. If dots aren't showing, check that the parent has explicit dimensions.

Glow performance: Each glowing dot has its own animation. Hundreds of glowing dots might lag on weak devices. Use glow sparingly.

Mask browser support: Gradient masks use -webkit-mask-image. Works everywhere except Internet Explorer (but who cares).

Z-index layering: Dots should be behind content. Use absolute inset-0 on the pattern and relative z-10 on your content.

Explore other minimalist background components for React applications:

Minimalist dot grid

Installation

Usage

Why most dot patterns look amateur

Examples

Linear Gradient Mask

Glow Effect

Custom Configuration

Features

API Reference

DotPattern

Common gotchas

You might also like

Grid Pattern

Noise

Interactive Grid Pattern

Hexagon Background

Squares Background

Gradient Background

Questions developers actually ask

On this page

React Background Dot Pattern

Reactdot-pattern

Reactdot-pattern

Reactdot-pattern

Reactdot-pattern

Grid Pattern

Noise

Interactive Grid Pattern

Hexagon Background

Squares Background

Gradient Background

How do I change dot colors?

Can I make squares or other shapes instead of dots?

How do I make the pattern denser or sparser?

Can I apply dots to only part of the screen?

How do I sync glow animations?

What's the performance impact of many dots?

On this page