Grid Pattern

PreviousNext

A flexible SVG-based grid background utility with customizable spacing, dash patterns, and square highlights. Useful for charts, diagrams, or decorative UI sections.

Installation

pnpm dlx shadcn@latest add https://ui.dalim.in/r/grid-pattern.json

Usage

import { GridPattern } from "@/components/ui/grid-pattern"
<div className="relative h-64 w-full rounded-lg border">
  <GridPattern variant="default" />
  <div className="relative z-10 flex h-full items-center justify-center">
    <p className="text-lg font-medium">Content over grid background</p>
  </div>
</div>

With squares highlighted

<GridPattern
  variant="small"
  squares={[
    [2, 3],
    [4, 1],
    [5, 2],
  ]}
/>