Controls
0.38
14
1.8
5
Backgrounds
DotGrid
A configurable dot-grid background for subtle texture, halftone fields and pop-art surfaces.
Component
36
Import
import { DotGrid } from "@swirski/ui";Playground
Usage
<div className="relative h-72 overflow-hidden border-4 border-black bg-[#FFD400]">
<DotGrid
className="inset-0"
color="#0B0B0C"
opacity={0.38}
spacing={14}
dotSize={1.8}
accentColor="#FF3131"
accentEvery={5}
accentDotSize={5}
/>
</div>Props
| Prop | Type | Default | Notes |
|---|---|---|---|
accentColor | string | - | Optional color for larger accent dots. |
accentDotSize | string | number | 3 | Accent dot radius. |
accentEvery | number | - | Adds an accent dot every N grid cells when greater than 1. |
color | string | "currentColor" | Primary dot color. |
dotSize | string | number | 1.2 | Primary dot radius. |
opacity | CSSProperties['Opacity'] | - | Opacity applied to the grid layer. |
size | 'sm' | 'md' | 'lg' | "md" | Generated from DotGridProps. |
spacing | string | number | 13 | Distance between dots. |
tone | 'default' | "default" | Generated from DotGridProps. |
variant | 'default' | 'accent' | "default" | Generated from DotGridProps. |
...divProps | Omit<HTMLAttributes<HTMLDivElement>, "color"> | - | Forwarded to the root div. |