Dot Pattern

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

dot-pattern-default

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

export function Component() {
  return (
    <div className="flex h-full w-full items-center justify-center">
      <DotPattern />
    </div>
  )
}

dot-pattern-custom

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

export function Component() {
  return (
    <div className="flex h-full w-full items-center justify-center">
      <DotPattern dotSize={0.5} width={5} height={5} />
    </div>
  )
}

dot-pattern-01

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

export function Component() {
  return (
    <div className="flex h-full w-full items-center justify-center">
      <DotPattern cy={10} cx={10} height={100} width={100} dotSize={5} />
    </div>
  )
}

dot-pattern-02

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

export function Component() {
  return (
    <div className="flex h-full w-full items-center justify-center">
      <DotPattern height={50} width={50} dotSize={1} />
    </div>
  )
}

dot-pattern-03

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

export function Component() {
  return (
    <div className="flex h-full w-full items-center justify-center">
      <DotPattern dotSize={0.2} width={4} height={4} />
    </div>
  )
}

Installation


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

Usage

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

<DotPattern />

Props

Prop	Type	Default
width	`number`	`20`
height	`number`	`20`
x	`number`	`0`
y	`number`	`0`
cx	`number`	`1`
cy	`number`	`1`
dotSize	`number`	`0.7`
className	`string`	—
fill	`string`	—
stroke	`string`	—
opacity	`number \| string`	—
style	`React.CSSProperties`	—
id	`string`	—
onClick	`(event: React.MouseEvent<SVGSVGElement>) => void`	—
...props	`React.SVGProps<SVGSVGElement>`	—

Counter Number Gauge