backgrounds

Dot Grid Background

A dark dot-grid background made of tiny radial-gradient dots. Perfect for sci-fi dashboards or code-heavy interfaces.

Preview

Dot Grid

Tiny dots on a dark canvas.

Copy for AI

Copy for Lovable is the fastest way to move this component into another Lovable project — it copies the full prompt with dependencies, files, and a usage example. Copy all files gives you the raw source if you want to paste it manually.

Installation

Source files

components/ui/dot-grid-bg.tsx

import { cn } from "@/lib/utils";

/**
 * A dark dot-grid background made of tiny radial-gradient dots.
 * Great for sci-fi dashboards or code-heavy interfaces.
 */
export function DotGridBg({
  children,
  className,
  innerClassName,
}: {
  children?: React.ReactNode;
  className?: string;
  innerClassName?: string;
}) {
  return (
    <div
      className={cn(
        "relative h-full w-full min-h-[320px] overflow-hidden bg-black",
        className,
      )}
    >
      <div
        className={cn(
          "absolute top-0 -z-[2] h-screen w-screen",
          innerClassName,
        )}
        style={{
          background: "radial-gradient(#ffffff33 1px, #00091d 1px)",
          backgroundSize: "20px 20px",
        }}
      />
      {children}
    </div>
  );
}

export default DotGridBg;