Architectural Scale
A purely CSS-driven background pattern utility. Perfect for developer tools and technical SaaS products.
Overview
A subtle grid background is practically a requirement for modern developer tools and technical SaaS platforms. It provides architectural scale and structure to otherwise empty sections.
Instead of loading tiled image assets, the GridPattern component uses lightweight CSS radial and linear gradients. It also includes an optional radial mask-image (the fadeEdge prop) which smoothly fades the grid out towards the edges, ensuring that foreground text remains highly legible.
Usage
import { GridPattern } from "@/components/creative/grid-pattern"
export default function TechHero() {
return (
<section className="relative min-h-screen flex items-center justify-center bg-black">
{/* Background */}
<GridPattern type="lines" size={32} fadeEdge={true} />
{/* Foreground */}
<div className="relative z-10 text-center">
<h1 className="text-5xl font-bold text-white">Deploy to the Edge</h1>
</div>
</section>
)
}
Usage Guide
1. Import the Component
Import the component into your React or Next.js page:
import { GridPattern } from "@/components/creative/grid-pattern";
2. Implementation Example
Render the component and customize its behavior by passing props:
import { GridPattern } from "@/components/creative/grid-pattern";
export default function Example() {
return (
<div className="w-full flex items-center justify-center p-8">
<GridPattern
type{/* value */}
size{10}
color="example"
/>
</div>
);
}