dot-pattern-default
import { DotPattern } from "@/components/ui/backgrounds/dot-pattern"
export function Component() {
return (
<div>
<DotPattern />
</div>
)
}
pnpm dlx shadcn@latest add "https://ui.dalim.in/r/dot-pattern-default.json"dot-pattern-custom
import { DotPattern } from "@/components/ui/backgrounds/dot-pattern"
export function Component() {
return (
<div>
<DotPattern
dotSize={0.5}
width={5}
height={5}
className="text-red-500 dark:text-lime-500"
/>
</div>
)
}
pnpm dlx shadcn@latest add "https://ui.dalim.in/r/dot-pattern-custom.json"Installation
pnpm dlx shadcn@latest add https://ui.dalim.in/r/styles/default/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>API Reference
DotPattern
Renders a customizable repeating SVG dot pattern.
| Prop | Type | Default | Description |
|---|---|---|---|
width | number | 20 | The width of each pattern tile. |
height | number | 20 | The height of each pattern tile. |
x | number | 0 | X-axis offset of the pattern. |
y | number | 0 | Y-axis offset of the pattern. |
cx | number | 1 | X coordinate of the dot inside the tile. |
cy | number | 0.5 | Y coordinate of the dot inside the tile. |
dotSize | number | 0.7 | Radius of the dots. |
className | string | – | Additional Tailwind/CSS classes applied to the <svg>. |
...props | SVGProps<SVGSVGElement> | – | Any additional props for the <svg>. |