Grid Pattern

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

grid-pattern-default

import { GridPattern } from "@/components/ui/grid-pattern"

export function Component() {
  return (
    <div className="flex h-full w-full items-center justify-center">
      <GridPattern />
    </div>
  )
}

grid-pattern-large

import { GridPattern } from "@/components/ui/grid-pattern"

export function Component() {
  return (
    <div className="flex h-full w-full items-center justify-center">
      <GridPattern variant="large" />
    </div>
  )
}

grid-pattern-small

import { GridPattern } from "@/components/ui/grid-pattern"

export function Component() {
  return (
    <div className="flex h-full w-full items-center justify-center">
      <GridPattern variant="small" />
    </div>
  )
}

grid-pattern-custom

import { GridPattern } from "@/components/ui/grid-pattern"

export function Component() {
  return (
    <div className="flex h-full w-full items-center justify-center">
      <GridPattern width={100} height={10} />
    </div>
  )
}

grid-pattern-01

import { GridPattern } from "@/components/ui/grid-pattern"

export function Component() {
  return (
    <div className="flex h-full w-full items-center justify-center">
      <GridPattern width={5} height={30} />
    </div>
  )
}

Installation


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

Usage

import { GridPattern } from "@/components/ui/grid-pattern"

<GridPattern />

Props

Prop	Type	Default
width	`number`	variant-based
height	`number`	variant-based
x	`number`	`-1`
y	`number`	`-1`
squares	`Array<[number, number]>`	—
strokeDasharray	`string`	`"0"`
variant	`"default" \| "small" \| "large"`	`"default"`
className	`string`	—
...props	`Record<string, unknown>`	—

Gauge Marquee