React Grid Pattern Background

Sometimes you just need a simple grid background—no animation, no interactivity, just clean lines. This SVG-based pattern tiles seamlessly and stays crisp at any zoom level. You can highlight specific cells if you need to mark certain areas, and there's an option for dashed lines if you want that blueprint look. It's lightweight, accessible, and works well as a subtle background layer for technical interfaces, editors, or anywhere you want that graph paper aesthetic.

React Grid Pattern Background preview

Installation

npx shadcn@latest add https://www.shadcn.io/r/grid-pattern.json

npx shadcn@latest add https://www.shadcn.io/r/grid-pattern.json

pnpm dlx shadcn@latest add https://www.shadcn.io/r/grid-pattern.json

bunx shadcn@latest add https://www.shadcn.io/r/grid-pattern.json

Related Components

FAQ