Docs
Grid Backgroud

Grid Backgroud

A Grid Backgroud

Installation

Copy and paste the cn util code into your project.

import { ClassValue, clsx } from "clsx"
import { twMerge } from "tailwind-merge"
 
 
export function cn(...inputs: ClassValue[]) {
  return twMerge(clsx(inputs))
}

Copy and paste the Grid code into your project.

API Reference

Props

PropTypeDescription
widthnumberGrid width.
heightnumberGrid height.
sizenumberGrid size.
childrenReact.ReactNodeThe content of the Grid.
classNamestringAdditional classes for the Grid.
contentClassNamestringAdditional classes for the Grid contentClassName.
gradientbooleanWhether to show the gradient or not
gradientWidthnumber | stringThe width of the gradient on either side

Usage

export function GridDemo() {
  return (
    <InteractiveGrid gradient={false}>
      <div className="w-[400px] h-[200px] border rounded-md" />
    </InteractiveGrid>
  )
}
DotGrid