Dot Pattern
A dot background that fills its container.
---
import { DotPattern } from "@/components/patterns/dot-pattern"
---
<div class="bg-background relative flex h-72 w-full items-center justify-center overflow-hidden rounded-lg border">
<DotPattern />
<p class="relative z-10 text-sm font-medium">Dot pattern</p>
</div>
Installation
bunx --bun shadcn@latest add @gnosticai/dot-patternUsage
Place the pattern inside a positioned parent. The element uses absolute inset-0
and fills that parent.
import { DotPattern } from "@/components/patterns/dot-pattern"<div class="relative h-72 overflow-hidden">
<DotPattern />
</div>Examples
Larger dots
dotSize sets the dot radius in pixels. dotSpace sets the distance from one
dot to the next.
---
import { DotPattern } from "@/components/patterns/dot-pattern"
---
<div class="bg-background relative flex h-72 w-full items-center justify-center overflow-hidden rounded-lg border">
<DotPattern dotSize={2} dotSpace={28} />
<p class="relative z-10 text-sm font-medium">Larger dots</p>
</div>
Custom colors
dotColor and dotBg accept any CSS color. The default dot color mixes
muted-foreground to 18 percent opacity.
---
import { DotPattern } from "@/components/patterns/dot-pattern"
---
<div class="bg-background relative flex h-72 w-full items-center justify-center overflow-hidden rounded-lg border">
<DotPattern
dotBg="var(--color-muted)"
dotColor="color-mix(in srgb, var(--color-primary) 55%, transparent)"
dotSize={1.5}
dotSpace={20}
/>
<p class="relative z-10 text-sm font-medium">Custom colors</p>
</div>
API Reference
| Prop | Default | Description |
|---|---|---|
dotSize |
1 |
Radius of each dot, in pixels. |
dotSpace |
16 |
Distance from one dot to the next, in pixels. |
dotColor |
muted foreground at 18% | CSS color of each dot. |
dotBg |
"transparent" |
CSS color behind the dots. |
class |
— | Extra classes on the root element. |
style |
— | Extra CSS declarations. These replace the pattern styles when they use the same property. |
See the registry source for the component source.