Dot Pattern Background

dots x radial

Repeating dot pattern background. From Magic UI.

backgrounddotspatternmagicui

Dot Pattern

Clean radial dot background

Code

bg-dots.tsx

export function DotBackground({ children, size = 24 }: { children: React.ReactNode; size?: number }) {
  return (
    <div className="relative grid place-items-center">
      <div className="absolute inset-0 opacity-40" style={{
        backgroundImage: "radial-gradient(circle, var(--border) 1px, transparent 1px)",
        backgroundSize: `${size}px ${size}px`,
      }} />
      <div className="relative">{children}</div>
    </div>
  );
}

Use it in another build

Paste the code into a component file, keep your project tokens (background, brand, radius) and it themes itself. Or tell Claude Code: “add the Dot Pattern Background component and wire it to my accent.”