DotGrid

PreviousNext

Animated dot grid with cursor interactions.

Docs
react-bitscomponent

Preview

Loading preview…
DotGrid/DotGrid.css
.dot-grid {
  padding: 1em;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  width: 100%;
  position: relative;
}

.dot-grid__wrap {
  width: 100%;
  height: 100%;
  position: relative;
}

.dot-grid__canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

Installation

npx shadcn@latest add @react-bits/DotGrid-TS-CSS

Usage

import { DotGridTSCSS } from "@/components/DotGrid-TS-CSS"
<DotGridTSCSS />