Dot Pattern

PreviousNext

A background utility component that renders a repeated dot pattern using SVG `<pattern>`. Useful for decorative backgrounds or UI sections.

Installation

pnpm dlx shadcn@latest add https://ui.dalim.in/r/dot-pattern.json

Usage

import { DotPattern } from "@/components/ui/dot-pattern"
<div className="relative h-64 w-full rounded-lg border">
  <DotPattern className="text-gray-300" />
  <div className="relative z-10 flex h-full items-center justify-center">
    <p className="text-lg font-medium">Content over dot background</p>
  </div>
</div>