Dot Pattern

A subtle radial-dot background for empty states, hero sections and preview frames. Pure CSS, no image asset.

patternbackgrounddotscss-only

Dot pattern surface

Usage

Drop the file into your project and import it. There is no package to install.

usage.tsx

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

export function Example() {
  return <DotPattern />;
}

Install prerequisites

Every component here relies only on Tailwind and the cn helper from shadcn/ui.

terminal

npm i clsx tailwind-merge

More in Backgrounds

Gradient Mesh

Four drifting blurred blobs plus an SVG grain overlay. Renders on the server, costs nothing at runtime, and gets most of the way to a WebGL mesh gradient.

Gradient Border

A card wrapped in a 1px brand gradient ring using a padding-box trick — no extra DOM layers or mask hacks.