Browse components
Dot Grid
A calm dot matrix that lights up around the cursor. Redraws only on movement.
Dot Grid
Installation
npx shadcn@latest add @glint-ui/dot-gridFirst time using @glint-ui? Add the registry to components.json once, or install by URL: npx shadcn@latest add https://glint-ui-seven.vercel.app/r/dot-grid.json
Usage
import { DotGrid } from "@/components/ui/dot-grid";
<div className="relative h-96">
<DotGrid />
</div>Props
| Prop | Type | Default | Description |
|---|---|---|---|
| gap | number | 24 | Px between dots. |
| dotSize | number | 2 | Dot radius in px. |
| baseColor | string | "#3f3f46" | Idle dot color. |
| activeColor | string | "#c6ff3d" | Dot color near the cursor. |
| proximity | number | 120 | Px radius that lights up. |
| className | string | — | Extra classes for the root element. |