Dot Pattern
A subtle dot pattern background with fade edges.
npx arupui add dot-pattern
Preview
Dot Pattern
Usage
dot-pattern.tsx
import { DotPattern } from "@/components/blocks/dot-pattern"
<DotPattern dotSize={2} dotGap={24}>
<h1>Content</h1>
</DotPattern>Props
| Prop | Type | Default |
|---|---|---|
dotSize | number | 1.5 |
dotGap | number | 20 |
fade | boolean | true |
dotSizeType:
numberDefault: 1.5dotGapType:
numberDefault: 20fadeType:
booleanDefault: true