Introducing Magic UI Pro - 50+ blocks and templates to build beautiful landing pages in minutes.


Docs
Grid Pattern

Grid Pattern

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

Grid Pattern

Installation

npx shadcn@latest add "https://magicui.design/r/grid-pattern"

Examples

Linear Gradient

Grid Pattern

Dashed Stroke

Grid Pattern

Props

GridPattern

PropTypeDescriptionDefault
widthnumberWidth of the pattern40
heightnumberHeight of the pattern40
xnumberX offset of the pattern-1
ynumberY offset of the pattern-1
squaresnumberX Y coordinates of filled squares as 2D array[]
strokeDasharraystringStroke dash array for the pattern0