---
title: Dot Pattern
description: A dot background that fills its container.
sidebar:
  badge: Astro
---

```astro
---
import { DotPattern } from "@/components/patterns/dot-pattern"
---

<div class="bg-background relative flex h-72 w-full items-center justify-center overflow-hidden rounded-lg border">
  <DotPattern />
  <p class="relative z-10 text-sm font-medium">Dot pattern</p>
</div>
```

## Installation

```bash
bunx --bun shadcn@latest add @gnosticai/dot-pattern
```

## Usage

Place the pattern inside a positioned parent. The element uses `absolute inset-0`
and fills that parent.

```ts
import { DotPattern } from "@/components/patterns/dot-pattern"
```

```astro
<div class="relative h-72 overflow-hidden">
  <DotPattern />
</div>
```

## Examples

### Larger dots

`dotSize` sets the dot radius in pixels. `dotSpace` sets the distance from one
dot to the next.

```astro
---
import { DotPattern } from "@/components/patterns/dot-pattern"
---

<div class="bg-background relative flex h-72 w-full items-center justify-center overflow-hidden rounded-lg border">
  <DotPattern dotSize={2} dotSpace={28} />
  <p class="relative z-10 text-sm font-medium">Larger dots</p>
</div>
```

### Custom colors

`dotColor` and `dotBg` accept any CSS color. The default dot color mixes
`muted-foreground` to 18 percent opacity.

```astro
---
import { DotPattern } from "@/components/patterns/dot-pattern"
---

<div class="bg-background relative flex h-72 w-full items-center justify-center overflow-hidden rounded-lg border">
  <DotPattern
    dotBg="var(--color-muted)"
    dotColor="color-mix(in srgb, var(--color-primary) 55%, transparent)"
    dotSize={1.5}
    dotSpace={20}
  />
  <p class="relative z-10 text-sm font-medium">Custom colors</p>
</div>
```

## API Reference

| Prop | Default | Description |
| --- | --- | --- |
| `dotSize` | `1` | Radius of each dot, in pixels. |
| `dotSpace` | `16` | Distance from one dot to the next, in pixels. |
| `dotColor` | muted foreground at 18% | CSS color of each dot. |
| `dotBg` | `"transparent"` | CSS color behind the dots. |
| `class` | — | Extra classes on the root element. |
| `style` | — | Extra CSS declarations. These replace the pattern styles when they use the same property. |

See the [registry source](/r/dot-pattern.json) for the component source.