# Dot Pattern

A background dot pattern made with SVGs, fully customizable using Tailwind CSS.

## Installation

### CLI
```bash
npm install magicui
```
### Manual
```html
<link rel="stylesheet" href="https://magicui.design/styles.css">
```

## Examples

### Linear Gradient
```html
<DotPattern
  width={16}
  height={16}
  glow={true}
/>  
```

### With Glow Effect
```html
<DotPattern
  width={32}
  height={32}
  glow={true}
/>
```

### Usage
```html
<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           |