Dot Pattern
Subtle radial dot grid background
Installation
Usage
import { DotPatternBackground, DotPattern } from "@/components/pioneerui/dot-pattern"
// Convenience wrapper
export default function Page() {
return (
<DotPatternBackground>
<h1>Your content</h1>
</DotPatternBackground>
)
}
// Or use DotPattern directly as an SVG overlayProps — DotPattern
| Prop | Type | Default | Description |
|---|---|---|---|
width | number | 16 | Pattern cell width |
height | number | 16 | Pattern cell height |
cr | number | 1 | Dot radius |
gapX | number | undefined | Extra horizontal gap |
gapY | number | undefined | Extra vertical gap |
className | string | undefined | SVG class (use for mask, color) |