Dot pattern

A decorative dotted background layer.

Default dot pattern

import { BuiDotPattern } from 'ng-blatui';

<div class="relative overflow-hidden rounded-xl border">
  <bui-dot-pattern />
</div>

Dense

Tighter gap

<bui-dot-pattern [gap]="10" />

Radial mask fade

<bui-dot-pattern [mask]="true" />

Prop	Type	Default	Description
`size`	`number`	`1`	Dot radius in pixels.
`gap`	`number`	`16`	Spacing between dots in pixels.
`mask`	`boolean`	`false`	Whether to fade the pattern with a radial mask toward the edges.

Every ng-blatui component also accepts a class input to merge extra Tailwind classes onto the host.