React Grid Pattern Background
SVG grid lines that make interfaces feel structured and professional. Build clean React background components with CSS masks, highlighted cells, customizable spacing, and TypeScript support for Next.js applications with shadcn/ui.
Powered by
Building structured interfaces?
Join our Discord community for help from other developers.
Blank backgrounds make interfaces feel unfinished. Like a wireframe that forgot to grow up. Professional apps need structure—visual cues that suggest organization and precision. This React component creates crisp SVG grid patterns that add structure without distraction.
Professional grid backgrounds
Watch clean lines create structure with highlight effects and masking:
Built for React applications with TypeScript and Next.js. SVG patterns render crisp at any resolution and support advanced effects like CSS masking, highlighted squares, and dashed line variants. Perfect for dashboards, documentation, and interfaces that need to feel intentionally designed.
Installation
npx shadcn@latest add https://www.shadcn.io/registry/grid-pattern.jsonnpx shadcn@latest add https://www.shadcn.io/registry/grid-pattern.jsonpnpm dlx shadcn@latest add https://www.shadcn.io/registry/grid-pattern.jsonbunx shadcn@latest add https://www.shadcn.io/registry/grid-pattern.jsonUsage
import { GridPattern } from "@/components/ui/grid-pattern";
import { cn } from "@/lib/utils";
export default function Dashboard() {
return (
<div className="relative flex h-screen w-full flex-col items-center justify-center overflow-hidden border bg-background">
<GridPattern
width={40}
height={40}
x={-1}
y={-1}
squares={[
[4, 4],
[5, 1],
[8, 2],
[5, 3],
[5, 5],
]}
className={cn(
"[mask-image:radial-gradient(400px_circle_at_center,white,transparent)]",
"inset-x-0 inset-y-[-30%] h-[200%] skew-y-12"
)}
/>
<div className="relative z-10">
<h1 className="text-4xl font-bold">Your Content</h1>
</div>
</div>
);
}Why most grid patterns look cheap
Most developers use CSS background-image with repeating linear gradients. It works, but it's pixelated, doesn't scale properly, and you can't highlight specific areas. Some try HTML tables or div grids, but that's DOM-heavy and inflexible.
This React component uses SVG pattern definitions that render crisp at any zoom level. CSS masks create sophisticated spotlight and fade effects. Individual squares can be highlighted by coordinates. Dashed patterns use SVG stroke-dasharray for precise control. It's the difference between a professional blueprint and graph paper.
Features
- SVG pattern definitions rendering crisp at any resolution and zoom level
- CSS mask integration supporting radial, linear, and custom gradient effects
- Highlighted square system allowing specific grid coordinates to be emphasized
- Customizable stroke patterns with dashed, dotted, and solid line support
- Flexible grid sizing with independent width and height cell dimensions
- Position offset control for precise pattern alignment and layout
- TypeScript definitions for all grid parameters and coordinate systems
- Performance optimized using efficient SVG rendering with minimal DOM impact
- shadcn/ui compatible with Tailwind CSS utilities and theming support
Examples
Linear Gradient Mask
Create directional fade effects with linear gradient masks:
Dashed Pattern
Use stroke-dasharray for dotted or dashed grid lines:
Multiple Variants
Compare different grid sizes and stroke patterns:
API Reference
GridPattern
Main component for SVG-based grid pattern backgrounds.
| Prop | Type | Default | Description |
|---|---|---|---|
width | number | 40 | Width of each grid cell in pixels |
height | number | 40 | Height of each grid cell in pixels |
x | number | -1 | X offset for pattern positioning |
y | number | -1 | Y offset for pattern positioning |
squares | Array<[number, number]> | [] | Coordinates [x, y] for highlighted squares |
strokeDasharray | string | "0" | SVG stroke pattern ("4 2" for dashed) |
className | string | - | Additional Tailwind CSS classes for styling |
Common Mask Patterns
// Radial spotlight effect
className="[mask-image:radial-gradient(400px_circle_at_center,white,transparent)]"
// Linear fade from top-left
className="[mask-image:linear-gradient(to_bottom_right,white,transparent)]"
// Vertical fade
className="[mask-image:linear-gradient(to_bottom,white,transparent)]"
// Corner spotlight
className="[mask-image:radial-gradient(300px_circle_at_top_left,white,transparent)]"Common gotchas
Mask syntax complexity: CSS mask-image requires specific syntax. Use [mask-image:radial-gradient(size_shape_at_position,white,transparent)] for spotlight effects. Wrong syntax = invisible grid.
Highlighted squares positioning: Square coordinates start at [0,0] for top-left. A 400px container with 40px cells has coordinates from [0,0] to [9,9]. Going beyond bounds won't show highlights.
Stroke dash patterns: Use strokeDasharray="4 2" for 4px line, 2px gap. Larger numbers = longer dashes. Too small values on large grids look like solid lines.
SVG scaling issues: The pattern scales with container size. Very small containers might not show the full grid effect. Minimum recommended container size is 200px.
Z-index layering: Grid appears behind content automatically, but complex layouts might need explicit z-index management for proper layering.
Performance with masks: Complex gradient masks can impact performance on older devices. Test on target devices if using elaborate mask effects.
You might also like
Explore other structured background components for React applications:
Dot Pattern
Minimalist dot grids with optional glow effects
Interactive Grid Pattern
Grid cells that respond to hover interactions
Flickering Grid
Animated grid squares with subtle flickering effects
Retro Grid
80s-style perspective grids with neon aesthetics
Hexagon Background
Honeycomb patterns for unique geometric layouts
Background Boxes
Isometric grid with colorful hover effects
Questions developers actually ask
React Background Gradient
Animated radial gradients that make product cards pop like premium showcase displays. Build stunning React background components with Framer Motion, hover effects, TypeScript support, and CSS animations for Next.js applications with shadcn/ui.
React Hexagon Background
Honeycomb hexagon grids that make interfaces feel engineered and precise. Build stunning React geometric background components with CSS clip-path, hover effects, responsive sizing, and TypeScript support for Next.js applications with shadcn/ui.