Grid Pattern for React

Grid Pattern draws a grid of thin lines behind whatever you put inside it, like graph paper. One SVG pattern fills the box at any size and stays sharp at any zoom. You can fill cells with squares, dash the lines with strokeDasharray, and fade the grid toward the edges with fade. Nothing moves and nothing runs in the browser: it renders to plain markup on the server.

Use it when a page needs structure without motion: a hero, a card header, a canvas or editor backdrop. For dots instead of lines, use Dot Pattern; for cells that light up under the pointer, Interactive Grid Pattern; for a grid in perspective scrolling toward a horizon, Retro Grid.

Installation

Usage

import { GridPattern } from "@/components/ui/grid-pattern";

Grid Pattern is a container: give it a size and put your content inside. The grid sits behind the content, and the box clips it.

<GridPattern className="flex min-h-[420px] items-center justify-center" fade="radial">
  <h1 className="text-5xl font-semibold">Plan it on paper first</h1>
</GridPattern>

For a backdrop behind the whole page, leave it empty and fix it under everything else:

<GridPattern className="fixed inset-0 -z-10" fade="radial" />

Demos

Squares

squares fills cells by [column, row], counted from the top-left cell, here in a card-sized box that fades out toward its bottom edge with fade="bottom". squareColor sets their colour.

Dashed lines

strokeDasharray dashes the lines in SVG's dash syntax, here "4 2" on a tighter grid (cellSize={24}), tinted with lineColor.

Accessibility

The grid is decoration: it's hidden from screen readers and lets every click through to the content. It never moves, so there's nothing to reduce and nothing that flashes. The lines use your theme's border colour, faint enough that text on top stays readable; keep that text in the foreground colour. The fade options are masks, so the grid fades into whatever is behind it, in light and dark.

FAQ

API Reference