Grid Pattern

A background grid pattern made with SVGs, fully customizable using Tailwind CSS.

import { GridPattern } from '@/registry/magicui/grid-pattern'

export function GridPatternDemo() {
  return (
    <div class="
      relative flex h-125 w-full flex-col items-center justify-center
      overflow-hidden rounded-lg border bg-background
    "
    >
      <GridPattern
        squares={[
          [4, 4],
          [5, 1],
          [8, 2],
          [5, 3],
          [5, 5],
          [10, 10],
          [12, 15],
          [15, 10],
          [10, 15],
          [15, 10],
          [10, 15],
          [15, 10],
        ]}
        class="
          inset-x-0 inset-y-[-30%] h-[200%] skew-y-12
          mask-[radial-gradient(400px_circle_at_center,white,transparent)]
        "
      />
    </div>
  )
}

Installation

pnpm dlx shadcn@latest add @magicui-solid/grid-pattern

bunx shadcn@latest add @magicui-solid/grid-pattern

yarn dlx shadcn@latest add @magicui-solid/grid-pattern

npx shadcn@latest add @magicui-solid/grid-pattern

Examples

Linear Gradient

import { GridPattern } from '@/registry/magicui/grid-pattern'

export function GridPatternLinearGradient() {
  return (
    <div class="
      relative flex size-full items-center justify-center overflow-hidden
      rounded-lg border bg-background p-20
    "
    >
      <GridPattern
        width={20}
        height={20}
        x={-1}
        y={-1}
        class="
          mask-[linear-gradient(to_bottom_right,white,transparent,transparent)]
        "
      />
    </div>
  )
}

Dashed Stroke

import { GridPattern } from '@/registry/magicui/grid-pattern'

export function GridPatternDashed() {
  return (
    <div class="
      relative flex size-full items-center justify-center overflow-hidden
      rounded-lg border bg-background p-20
    "
    >
      <GridPattern
        width={30}
        height={30}
        x={-1}
        y={-1}
        strokeDasharray="4 2"
        class="mask-[radial-gradient(300px_circle_at_center,white,transparent)]"
      />
    </div>
  )
}

Usage

import { GridPattern } from '@/components/magicui/grid-pattern'

<div className="relative h-[500px] w-full overflow-hidden">
  <GridPattern />
</div>

Props

GridPattern

Prop	Type	Default	Description
`width`	`number`	`40`	Width of the pattern
`height`	`number`	`40`	Height of the pattern
`x`	`number`	`-1`	X offset of the pattern
`y`	`number`	`-1`	Y offset of the pattern
`squares`	`number`	`[]`	X Y coordinates of filled squares as 2D array
`strokeDasharray`	`string`	`0`	Stroke dash array for the pattern

Original:

magicui.design/docs/components/grid-pattern