Skip to main content

Documentation Index

Fetch the complete documentation index at: https://mintlify.com/Max-Samson/magicui/llms.txt

Use this file to discover all available pages before exploring further.

A simple and customizable SVG grid pattern that can be used as a background element with optional filled squares.

​
Installation

    ​
    Usage

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

export default function Example() {
  return (
    <div className="relative h-[500px] w-full overflow-hidden">
      <GridPattern />
    </div>
  )
}

    ​
    With Filled Squares

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

export default function Example() {
  return (
    <div className="relative h-[500px] w-full overflow-hidden">
      <GridPattern 
        squares={[
          [0, 1],
          [1, 3],
          [3, 0],
          [4, 4],
        ]}
      />
    </div>
  )
}

    ​
    Dashed Stroke

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

export default function Example() {
  return (
    <div className="relative h-[500px] w-full overflow-hidden">
      <GridPattern strokeDasharray="4 2" />
    </div>
  )
}

    ​
    Props

    PropTypeDefaultDescription
    widthnumber40Width of each grid cell
    heightnumber40Height of each grid cell
    xnumber-1X offset of the pattern
    ynumber-1Y offset of the pattern
    squaresArray<[number, number]>-Array of [x, y] coordinates for filled squares
    strokeDasharraystring"0"Stroke dash array for the grid lines
    classNamestring-Additional CSS classes for the SVG element
    Use the squares prop to highlight specific grid cells by providing their coordinates as 2D arrays.

    Build docs developers (and LLMs) love

    Get started for freeTalk to us