Grid Pattern

Getting Started

Templates

Components

Special Effects

Animations

Text Animations

Device Mocks

Buttons

Backgrounds

Community

Examples

Linear Gradient

Open in

"use client"

import { cn } from "@/lib/utils"
import { GridPattern } from "@/registry/magicui/grid-pattern"

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

Dashed Stroke

Open in

"use client"

import { cn } from "@/lib/utils"
import { GridPattern } from "@/registry/magicui/grid-pattern"

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

Usage

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

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

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

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

Examples

Linear Gradient

Open in

"use client"

import { cn } from "@/lib/utils"
import { GridPattern } from "@/registry/magicui/grid-pattern"

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

Dashed Stroke

Open in

"use client"

import { cn } from "@/lib/utils"
import { GridPattern } from "@/registry/magicui/grid-pattern"

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

Usage

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

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

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

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

Grid Pattern

Installation

Examples

Linear Gradient

Dashed Stroke

Usage

Props

GridPattern

Grid Pattern

Installation

Examples

Linear Gradient

Dashed Stroke

Usage

Props

GridPattern