Skip to main content
A customizable SVG dot pattern that can be used as a background element with optional glowing animation effects.

​
Installation

    ​
    Usage

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

export default function Example() {
  return (
    <div className="relative h-[500px] w-full overflow-hidden">
      <DotPattern />
    </div>
  )
}

    ​
    With Glow Effect

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

export default function Example() {
  return (
    <div className="relative h-[500px] w-full overflow-hidden">
      <DotPattern glow className="text-blue-500" />
    </div>
  )
}

    ​
    Props

    PropTypeDefaultDescription
    widthnumber16Horizontal spacing between dots
    heightnumber16Vertical spacing between dots
    xnumber0X-offset of the entire pattern
    ynumber0Y-offset of the entire pattern
    cxnumber1X-offset of individual dots
    cynumber1Y-offset of individual dots
    crnumber1Radius of each dot
    classNamestring-Additional CSS classes for the SVG container
    glowbooleanfalseWhether dots should have a glowing animation effect
    Control the dot color using text color utility classes like text-neutral-400 or text-blue-500.
    The component automatically responds to container size changes and adjusts the number of dots accordingly.

    Build docs developers (and LLMs) love

    Get started for freeTalk to us