Your ImageYour Image
  • About
  • Templates10
  • Blocks81New
  • Icons1635
  • Graphics4K
  • Components107New
  • About
  • Components
  • Pricing
  • Contact
Book an Intro call
Book an Intro call
  • About
  • Works
  • Pricing
  • Templates
  • Blocks
  • components
  • Graphic
  • Backgrounds
  • Designs
  • Icons
  • Logos
  • Flags
  • Privacy
  • Terms
  • Contact
© 2025Made with by Ali Imam

  • Gradient Mesh
  • Gradient Wave
  • Shader Ripple
  • Shader Lines
  • Shader RGB
  • Particles Highlight
  • Particle Circle
  • Void Animation
  • Gradient Bars
  • Render Canvas
  • Fireball
  • Scroll Progress
  • Shine Border
  • Dot Pattern
  • Grid Pattern

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],
  ]}
/>
Dot PatternCounter Number

On This Page

InstallationUsageWith squares highlighted