Dot Pattern

{{-- 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>

{{-- 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>

{{-- :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>