# Grid Pattern

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

## Installation

CLI

```bash
# Installation command here
```

Manual

```bash
# Manual installation commands here
```

## Examples

### Linear Gradient

```jsx
// Example code for linear gradient here
```

### Dashed Stroke

```jsx
// Example code for dashed stroke here
```

### Usage

```jsx
// Usage example here
```

## Props

### GridPattern

| Prop                | Type     | Default | Description                                    |
|---------------------|----------|---------|------------------------------------------------|
| `width`             | `number` | `40`    | Width of the pattern                           |
| `height`            | `number` | `40`    | Height of the pattern                          |
| `x`                 | `number` | `-1`    | X offset of the pattern                        |
| `y`                 | `number` | `-1`    | Y offset of the pattern                        |
| `squares`           | `number` | `[]`    | X Y coordinates of filled squares as 2D array |
| `strokeDasharray`   | `string` | `0`     | Stroke dash array for the pattern              |

## Related Links

- [Dot Pattern](/content/docs/components/dot-pattern/index.html)  
- [Hexagon Pattern](/content/docs/components/hexagon-pattern/index.html)

- **Contribute**  
  - [Report an issue](https://github.com/magicuidesign/magicui/issues/new?title=%5Bbug%5D%3A+%2Fdocs%2Fcomponents%2Fgrid-pattern&labels=bug&labels=documentation&template=bug_report.yml)  
  - [Request a feature](https://github.com/magicuidesign/magicui/issues/new?title=%5Bfeat%5D%3A+%2Fdocs%2Fcomponents%2Fgrid-pattern&labels=enhancement&template=feature_request.yml)  
  - [Edit this page](https://github.com/magicuidesign/magicui/edit/main/apps/www/content/docs/components/grid-pattern.mdx)