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


Docs
Interactive Grid Pattern

Interactive Grid Pattern

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

Interactive Grid Pattern

Installation

Examples

Colorful

Interactive Grid Pattern

Props

PropTypeDescriptionDefault
widthnumberWidth of each square in the grid40
heightnumberHeight of each square in the grid40
squares[number, number]Number of squares in the grid. First number is horizontal squares, second is vertical squares[24,24]
classNamestringClass name applied to the grid container-
squaresClassNamestringClass name applied to individual squares in the grid-