Iso Grid

Heroes

About

An isometric lattice background of fine lines that fades toward its edges, meant to sit behind hero or section content.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Iso Grid to your project and fits it to your theme.

Code

How Iso Grid is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

import { IsoGrid } from "@/components/ui/iso-grid";

export default function IsoGridDemo() {
  return (
    <section className="relative flex min-h-[480px] w-full items-center justify-center overflow-hidden bg-background">
      <IsoGrid className="absolute inset-0 -z-10" cell={28} />
      <div className="relative z-10 max-w-md px-6 text-center">
        <h2 className="text-2xl font-semibold tracking-tight text-foreground">
          Build something isometric
        </h2>
        <p className="mt-2 text-sm text-muted-foreground">
          A faint lattice of lines fading toward the edges, perfect for sitting
          behind a hero or section heading.
        </p>
      </div>
    </section>
  );
}