Dot Pattern
A background dot pattern made with SVGs, fully customizable using Tailwind CSS.
Installation
CLI
npm install magicui
Manual
<link rel="stylesheet" href="https://magicui.design/styles.css">
Examples
Linear Gradient
<DotPattern
width={16}
height={16}
glow={true}
/>
With Glow Effect
<DotPattern
width={32}
height={32}
glow={true}
/>
Usage
<DotPattern
width={48}
height={48}
x={0}
y={0}
cx={1}
cy={1}
cr={1}
className="custom-class"
/>
Props
Dot Pattern
| Prop | Type | Default | Description |
|---|---|---|---|
width |
any |
16 |
Width of the dot pattern |
height |
any |
16 |
Height of the dot pattern |
x |
any |
0 |
X position of the dot |
y |
any |
0 |
Y position of the dot |
cx |
any |
1 |
X position of the circle |
cy |
any |
1 |
Y position of the circle |
cr |
any |
1 |
Radius of the circle |
className |
string |
- |
Class name of the dot pattern |
glow |
boolean |
false |
Activates the glow effect in the dot pattern |