Stepwise UI

Dotted Grid

A static dot grid for section backgrounds. Absolutely positioned to fill its nearest positioned ancestor - give the parent relative and a height. Looking for the mouse-follow version? Dotted Spotlight has its own page.

Installation

npx stepwise-ui add dotted-grid
import { DottedGrid } from '@/components/stepwise/dotted-grid'

<div className="relative h-64">
  <DottedGrid />
</div>

Props

PropTypeDescription
size
number
Pattern tile size in px. Default 24.
dotSize
number
Dot radius in px. Default 1.5.
faded
boolean
Fade the pattern out toward the edges. Default true.
className
string
Merged onto the root.