Dot Pattern

Installation

npx shadcn@latest add @blank/dot-pattern

Usage

import { DotPattern } from "@/components/ui/dot-pattern"

<div className="relative overflow-hidden">
  <DotPattern className="mask-radial-from-10% mask-radial-to-75%" />
</div>

The dots are one SVG pattern, not one element per dot, so a full-page background costs the same as a small card. They take currentColor, which is the border token unless you set a text-* class.

glow adds a few dozen extra dots that pulse in the foreground color. They are placed on the client after the element is measured, only animate while on screen, and hold still under reduced motion.

Props