> ## Documentation Index
> Fetch the complete documentation index at: https://docs.swiftcn.lol/llms.txt
> Use this file to discover all available pages before exploring further.

# Dotpattern

# DotPattern Component in SwiftUI

## Overview

`DotPattern` is a SwiftUI component for generating a dot pattern background. It provides customization options for setting the dot color, spacing between dots, brightness, and background color.

## Preview

<div style={{ display: "flex", justifyContent: "center" }}>
  <div style={{ marginRight: "40px" }}>
    <img src="https://www.swiftcn.lol/dotpattern.png" alt="DotPattern Preview 1" />
  </div>

  <div>
    <img src="https://www.swiftcn.lol/dotpatternwhite.png" alt="DotPattern Preview 2" />
  </div>
</div>

## Installation

Include the `DotPattern.swift` file in your SwiftUI project. [File Link](https://github.com/Swiftcn-UI/swiftcn-playground/blob/main/Swiftcn%20Playground.swiftpm/Components/DotPattern.swift)

## Properties

* `dotColor: Color` (Default: `Color.blue`) - The color of the dots.
* `spacing: CGFloat` (Default: `0`) - Additional spacing between dots.
* `brightness: Double` (Default: `1.0`, Range: `0.0-1.0`) - Opacity of the dots.
* `backgroundColor: Color` (Default: `Color.black`) - The background color of the pattern.

## Usage

### Basic Usage

Here's how you can use the `DotPattern` component with default parameters:

```swift theme={null}
DotPattern()
```

### Custom Usage

Here's how you can use the `DotPattern` component with custom parameters:

```swift theme={null}
DotPattern(dotColor: Color.black, spacing: 15, brightness: 0.8, backgroundColor: Color.white)
```