Components

Dot Pattern

A decorative dotted-grid background layer with adjustable size, gap and edge fade.

php artisan blatui:add dot-pattern

Dot Pattern

A subtle dotted grid sits behind this content, adding texture while staying readable in both light and dark themes.

{{-- The dot grid paints behind the card content; place it in a `relative` container. --}}
<div class="bg-card text-card-foreground relative overflow-hidden rounded-xl border p-8 shadow-sm">
    <x-ui.dot-pattern />

    <div class="relative">
        <h3 class="text-base font-semibold">Dot Pattern</h3>
        <p class="text-muted-foreground mt-2 text-sm">
            A subtle dotted grid sits behind this content, adding texture while
            staying readable in both light and dark themes.
        </p>
    </div>
</div>

Dense

Dense grid (gap 10)

{{-- A tighter grid — smaller gap packs the dots closer together. --}}
<div class="bg-card text-card-foreground relative flex h-48 items-center justify-center overflow-hidden rounded-xl border p-8 shadow-sm">
    <x-ui.dot-pattern :gap="10" />

    <p class="text-muted-foreground relative text-sm">
        Dense grid (gap 10)
    </p>
</div>

Masked

Edges fade to transparent

{{-- :mask="true" fades the dots to transparent toward the edges, densest in the centre. --}}
<div class="bg-card text-card-foreground relative flex h-48 items-center justify-center overflow-hidden rounded-xl border p-8 shadow-sm">
    <x-ui.dot-pattern :mask="true" />

    <p class="text-muted-foreground relative text-sm">
        Edges fade to transparent
    </p>
</div>

API Reference

Props, slots and exposed methods for <x-ui.dot-pattern>.

Props

Prop	Type	Default	Description
`size`	`number`	`1`	Diameter of each dot in pixels.
`gap`	`number`	`16`	Spacing between dots in pixels (the grid cell size).
`mask`	`bool`	`false`	Radially fade the dots to transparent toward the edges so the grid is densest in the centre.