Dot Pattern
Displays a background with customizable dots.
Launch your side project
without giving up your evenings
Usage
import { DotPattern } from "@/app/_components/ui/dot-pattern";<DotPattern dotSize={1} dotSpacing={22} gradientColor="hsl(var(--background))"> {children}</DotPattern>Props
| Name | Type | Default | Description |
|---|---|---|---|
dotColor | string | "hsl(var(--foreground) / 0.7)" | The color of the dots. |
dotSize | number | 1 | The size of the dots. |
dotSpacing | number | 22 | The spacing between the dots. |
gradientColor | string | "hsl(var(--background))" | The color of the gradient masking the dots. |
className | string | - | Adds a custom class to the component. |
children | ReactNode | - | The content to display. |