Interactive Grid Pattern

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

Install using CLI

npm

pnpm

bun

yarn

npx shadcn-vue@latest add "https://inspira-ui.com/r/interactive-grid-pattern.json"

Copy and paste the following code

InteractiveGridPattern.vue

Prop Name	Type	Default	Description
`className`	`string`	-	Additional classes for styling the component.
`squaresClassName`	`string`	-	Additional classes for styling the squares.
`width`	`number`	`40`	Width of the square in pixels.
`height`	`number`	`40`	Height of the square in pixels.
`squares`	`[number, number]`	`[24, 24]`	Number of squares in the grid pattern.

On This Page