Grid and Dotted Backgrounds for React & shadcn/ui

page.tsx

import { DecorativeBackground } from "@/components/ui/decorative-background";

export default function Page() {

  return (
    <div>
      <DecorativeBackground
          type="grid"
          options={{
              colors: ['#1c1c1c', '#1c1c1c'],
              spacing: ['24px', '24px'],
              widths: ['1px', '1px']
          }}
      />
    </div>
  );
}

This DecorativeBackground component provides a seamless way to create grid and dot background patterns. Though it currently only supports grid and dot patterns, more will be added on demand.

DevRedBox would like to thank Julien Thibeaut for creating such a great guide on crafting grid and dot backgrounds.

Installation

This component uses Tailwind CSS classes for styling and TypeScript support. Make sure you have enabled these in your React project.

This component also uses the cn helper function from shadcn/ui. If you are not using shadcn/ui, follow this guide to create this function.

Paste the following code into your project.

components/ui/decorative-background.tsx

import type * as React from "react";
import { cn } from "@/lib/utils";

const toBackgroundSize = (spacing: React.CSSProperties["backgroundSize"] | string[]) =>
    Array.isArray(spacing) ? spacing.join(" ") : spacing;

interface GridBgProps extends React.ComponentProps<"div"> {
    options?: {
        spacing?: React.CSSProperties["backgroundSize"] | string[];
        widths?: string[];
        colors?: string[];
    }
}

function GridBackgrounds({ options, className, style, ...props }: GridBgProps) {
    const {
        spacing = "24px 24px",
        widths: widthsProp = [],
        colors: colorsProp = []
    } = options ?? {};

    const widths = [widthsProp[0] ?? "1px", widthsProp[1] ?? "1px"];
    const colors = [colorsProp[0] ?? "#80808012", colorsProp[1] ?? "#80808012"];

    return (
        <div
            className={cn("absolute inset-0 h-full w-full -z-10", className)}
            style={{
                backgroundImage: [
                    `linear-gradient(to right, ${colors[0]} ${widths[0]}, transparent ${widths[0]})`,
                    `linear-gradient(to bottom, ${colors[1]} ${widths[1]}, transparent ${widths[1]})`,
                ].join(", "),
                backgroundSize: toBackgroundSize(spacing),
                ...style
            }}
            {...props}
        />
    )
}

interface DotBgProps extends React.ComponentProps<"div"> {
    options?: {
        spacing?: React.CSSProperties["backgroundSize"] | string[],
        size?: string,
        color?: string,
    }
}

function DotBackgrounds({ options, className, style, ...props }: DotBgProps) {
    const {
        spacing = '16px 16px',
        color = '#1c1c1c',
        size = '1px'
    } = options ?? {};

    return (
        <div
            className={cn("absolute inset-0 h-full w-full -z-10", className)}
            style={{
                backgroundImage: `radial-gradient(${color} ${size}, transparent 1px)`,
                backgroundSize: toBackgroundSize(spacing),
                ...style,
            }}
            {...props}
        />
    )
}

type Props = DotBgProps | GridBgProps

function DecorativeBackground({ type = "grid", ...props }: Props & { type?: "grid" | "dot" }) {


    if (type === "grid") {
        return (
            <GridBackgrounds
                {...props}
            />
        )
    }

    if (type === "dot") {
        return (
            <DotBackgrounds
                {...props}
            />
        )

    }
    return null;
}

export {
    DecorativeBackground,
    DotBackgrounds,
    GridBackgrounds
};

Make sure the import paths match your project's structure.

Props & Usage

Following are the props for DecorativeBackground:

Prop	Type	Default	Description
`type`	`"grid" \| "dot"`	`"grid"`	Background pattern type
`options`	`object`	`undefined`	Styling options for the chosen pattern type

The rest of the props are defaults for an HTML div element, such as className, id, etc.

The options object differs for dot and grid pattern.

Grid pattern

Prop	Type	Default	Description
`spacing`	`string \| string[]`	`"24px 24px"`	The spacing between grid lines
`widths`	`string[]`	`["1px", "1px"]`	The widths of the horizontal and vertical grid lines
`colors`	`string[]`	`["#80808012", "#80808012"]`	The colors of the horizontal and vertical grid lines

Dot pattern

Prop	Type	Default	Description
`spacing`	`string \| string[]`	`"16px 16px"`	The spacing between dots
`size`	`string`	`"1px"`	The size of each dot
`color`	`string`	`"#1c1c1c"`	The color of the dots

Examples

Dot pattern background.

page.tsx

import { DecorativeBackground } from "@/components/ui/decorative-background";

export default function Page() {

  return (
    <div>
      <DecorativeBackground
          type="dot"
          options={{
              color: "#1c1c1c",
              spacing: ['25px', '25px'],
              size: "1px"
          }}
      />
    </div>
  );
}

Grid pattern background with slightly bigger spacing.

page.tsx

import { DecorativeBackground } from "@/components/ui/decorative-background";

export default function Page() {

  return (
    <div>
       <DecorativeBackground
            type="grid"
            options={{
                colors: ['#1c1c1c', '#1c1c1c'],
                spacing: ['25px', '25px'],
                widths: ['1px', '1px']
            }}
        />
    </div>
  );
}