Grid Pattern

A background grid pattern made with SVGs.

1
"use client";
2

3
import { GridPattern } from "@/components/backgrounds/pxl/grid-pattern";
4
import { cn } from "@/lib/utils";
5

6
export default function GridPatternDemo() {
7
  return (
8
    <GridPattern
9
      squares={[
10
        [4, 4],
11
        [5, 1],
12
        [8, 2],
13
        [5, 3],
14
        [5, 5],
15
        [10, 10],
16
        [12, 15],
17
        [15, 10],
18
        [10, 15],
19
        [15, 10],
20
        [10, 15],
21
        [15, 10],
22
      ]}
23
      className={cn(
24
        "mask-[radial-gradient(400px_circle_at_center,white,transparent)]",
25
        "inset-x-0 inset-y-[-30%] h-[200%] skew-y-12",
26
      )}
27
    />
28
  );
29
}

Installation

Command
Manual

pnpm dlx shadcn@latest add pxl-ui/registry/backgrounds/grid-pattern

Copy and paste the following code into your project.

1
import { cva, type VariantProps } from "class-variance-authority";
2
import { type SVGProps, useId } from "react";
3

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

6
const animatedGridPatternVariants = cva(
7
  "pointer-events-none absolute inset-0 h-full w-full",
8
  {
9
    variants: {
10
      variant: {
11
        default: "bg-background fill-border stroke-border text-border",
12
        primary: "bg-primary fill-primary-foreground/30 stroke-primary-foreground/30 text-primary-foreground/30",
13
        secondary: "bg-secondary fill-secondary-foreground/30 stroke-secondary-foreground/30 text-secondary-foreground/30",
14
        muted: "bg-muted fill-muted-foreground/30 stroke-muted-foreground/30 text-muted-foreground/30",
15
        info: "bg-info fill-info-foreground/30 stroke-info-foreground/30 text-info-foreground/30",
16
        success: "bg-success fill-success-foreground/30 stroke-success-foreground/30 text-success-foreground/30",
17
        warning: "bg-warning fill-warning-foreground/30 stroke-warning-foreground/30 text-warning-foreground/30",
18
        danger: "bg-danger fill-danger-foreground/30 stroke-danger-foreground/30 text-danger-foreground/30",
19
      },
20
    },
21
    defaultVariants: {
22
      variant: "default",
23
    },
24
  },
25
);
26

27
function GridPattern({
28
  variant = "default",
29
  width = 40,
30
  height = 40,
31
  x = -1,
32
  y = -1,
33
  strokeDasharray = "0",
34
  squares,
35
  className,
36
  ...props
37
}: SVGProps<SVGSVGElement> &
38
  VariantProps<typeof animatedGridPatternVariants> & {
39
    width?: number;
40
    height?: number;
41
    x?: number;
42
    y?: number;
43
    squares?: Array<[x: number, y: number]>;
44
    strokeDasharray?: string;
45
    className?: string;
46
    [key: string]: unknown;
47
  }) {
48
  const id = useId();
49

50
  return (
51
    <svg
52
      aria-hidden="true"
53
      className={cn(animatedGridPatternVariants({ variant }), className)}
54
      {...props}
55
    >
56
      <defs>
57
        <pattern
58
          id={id}
59
          width={width}
60
          height={height}
61
          patternUnits="userSpaceOnUse"
62
          x={x}
63
          y={y}
64
        >
65
          <path
66
            d={`M.5 ${height}V.5H${width}`}
67
            fill="none"
68
            strokeDasharray={strokeDasharray}
69
          />
70
        </pattern>
71
      </defs>
72
      <rect width="100%" height="100%" strokeWidth={0} fill={`url(#${id})`} />
73
      {squares && (
74
        <svg x={x} y={y} className="overflow-visible">
75
          {squares.map(([x, y]) => (
76
            <rect
77
              strokeWidth="0"
78
              key={`${x}-${y}`}
79
              width={width - 1}
80
              height={height - 1}
81
              x={x * width + 1}
82
              y={y * height + 1}
83
            />
84
          ))}
85
        </svg>
86
      )}
87
    </svg>
88
  );
89
}
90

91
export { GridPattern };

Update the import paths to match your project setup.

Usage

import { GridPattern } from "@/components/backgrounds/pxl/grid-pattern"

<GridPattern />

Linear Gradient

1
"use client";
2

3
import { GridPattern } from "@/components/backgrounds/pxl/grid-pattern";
4
import { cn } from "@/lib/utils";
5

6
export default function GridPatternLinearGradient() {
7
  return (
8
    <GridPattern
9
      width={20}
10
      height={20}
11
      x={-1}
12
      y={-1}
13
      className={cn(
14
        "mask-[linear-gradient(to_bottom_right,white,transparent,transparent)]",
15
      )}
16
    />
17
  );
18
}

Dashed Stroke

1
"use client";
2

3
import { GridPattern } from "@/components/backgrounds/pxl/grid-pattern";
4
import { cn } from "@/lib/utils";
5

6
export default function GridPatternDashed() {
7
  return (
8
    <GridPattern
9
      width={30}
10
      height={30}
11
      x={-1}
12
      y={-1}
13
      strokeDasharray={"4 2"}
14
      className={cn(
15
        "mask-[radial-gradient(300px_circle_at_center,white,transparent)]",
16
      )}
17
    />
18
  );
19
}

Variants

Use the variant prop to change the colors of the grid.

1
"use client";
2

3
import { GridPattern } from "@/components/backgrounds/pxl/grid-pattern";
4
import { cn } from "@/lib/utils";
5

6
export default function FlickeringGridVariants() {
7
  return (
8
    <div className="flex flex-wrap size-full items-center justify-center gap-2">
9
      <div className="relative w-max h-32 aspect-video pixel-rounded pixel-size-lg">
10
        <GridPattern
11
          variant="muted"
12
          numSquares={30}
13
          maxOpacity={0.1}
14
          duration={3}
15
          repeatDelay={1}
16
          className={cn(
17
            "mask-[radial-gradient(500px_circle_at_center,white,transparent)]",
18
            "inset-x-0 inset-y-[-30%] h-[200%] skew-y-12",
19
          )}
20
        />
21
      </div>
22
      <div className="relative w-max h-32 aspect-video pixel-rounded pixel-size-lg">
23
        <GridPattern
24
          variant="primary"
25
          numSquares={30}
26
          maxOpacity={0.1}
27
          duration={3}
28
          repeatDelay={1}
29
          className={cn(
30
            "mask-[radial-gradient(500px_circle_at_center,white,transparent)]",
31
            "inset-x-0 inset-y-[-30%] h-[200%] skew-y-12",
32
          )}
33
        />
34
      </div>
35
      <div className="relative w-max h-32 aspect-video pixel-rounded pixel-size-lg">
36
        <GridPattern
37
          variant="info"
38
          numSquares={30}
39
          maxOpacity={0.1}
40
          duration={3}
41
          repeatDelay={1}
42
          className={cn(
43
            "mask-[radial-gradient(500px_circle_at_center,white,transparent)]",
44
            "inset-x-0 inset-y-[-30%] h-[200%] skew-y-12",
45
          )}
46
        />
47
      </div>
48
      <div className="relative w-max h-32 aspect-video pixel-rounded pixel-size-lg">
49
        <GridPattern
50
          variant="success"
51
          numSquares={30}
52
          maxOpacity={0.1}
53
          duration={3}
54
          repeatDelay={1}
55
          className={cn(
56
            "mask-[radial-gradient(500px_circle_at_center,white,transparent)]",
57
            "inset-x-0 inset-y-[-30%] h-[200%] skew-y-12",
58
          )}
59
        />
60
      </div>
61
      <div className="relative w-max h-32 aspect-video pixel-rounded pixel-size-lg">
62
        <GridPattern
63
          variant="warning"
64
          numSquares={30}
65
          maxOpacity={0.1}
66
          duration={3}
67
          repeatDelay={1}
68
          className={cn(
69
            "mask-[radial-gradient(500px_circle_at_center,white,transparent)]",
70
            "inset-x-0 inset-y-[-30%] h-[200%] skew-y-12",
71
          )}
72
        />
73
      </div>
74
      <div className="relative w-max h-32 aspect-video pixel-rounded pixel-size-lg">
75
        <GridPattern
76
          variant="danger"
77
          numSquares={30}
78
          maxOpacity={0.1}
79
          duration={3}
80
          repeatDelay={1}
81
          className={cn(
82
            "mask-[radial-gradient(500px_circle_at_center,white,transparent)]",
83
            "inset-x-0 inset-y-[-30%] h-[200%] skew-y-12",
84
          )}
85
        />
86
      </div>
87
    </div>
88
  );
89
}

API Reference

GridPattern

Prop	Type	Default	Description
`className`	`string`	`-`	Additional classes to be added to the pattern
`variant`	`"default" \| "primary" \| "secondary" \| "muted" \| "success" \| "warning" \| "danger"`	`"default"`	Colors of the grids
`width`	`number`	`40`	Width of the pattern
`height`	`number`	`40`	Height of the pattern
`x`	`number`	`-1`	X offset of the pattern
`y`	`number`	`-1`	Y offset of the pattern
`strokeDasharray`	`number`	`0`	Stroke dash array of the pattern
`numSquares`	`number`	`200`	Number of squares in the pattern
`maxOpacity`	`number`	`0.5`	Maximum opacity of the pattern
`duration`	`number`	`1`	Duration of the animation
`repeatDelay`	`number`	`0.5`	Repeat delay of the animation