blatui

Components

Grid Pattern

A decorative grid / graph-paper background layer with an optional edge fade.

php artisan blatui:add grid-pattern

Build on a grid

A decorative graph-paper background layer.

{{-- The grid fills its nearest positioned parent — here a relative bordered hero card. --}}
<div class="bg-card relative flex h-64 w-full max-w-2xl items-center justify-center overflow-hidden rounded-xl border">
    <x-ui.grid-pattern />

    <div class="relative text-center">
        <h3 class="text-foreground text-2xl font-semibold tracking-tight">Build on a grid</h3>
        <p class="text-muted-foreground mt-1 text-sm">A decorative graph-paper background layer.</p>
    </div>
</div>

Large

48px cells

Larger gaps for a more open pattern.

{{-- A wider cell size (:gap="48") for a bolder, more open grid. --}}
<div class="bg-card relative flex h-64 w-full max-w-2xl items-center justify-center overflow-hidden rounded-xl border">
    <x-ui.grid-pattern :gap="48" />

    <div class="relative text-center">
        <h3 class="text-foreground text-2xl font-semibold tracking-tight">48px cells</h3>
        <p class="text-muted-foreground mt-1 text-sm">Larger gaps for a more open pattern.</p>
    </div>
</div>

Masked

Soft edges

The grid dissolves toward the borders.

{{-- :mask="true" fades the grid out toward the edges with a radial mask. --}}
<div class="bg-card relative flex h-64 w-full max-w-2xl items-center justify-center overflow-hidden rounded-xl border">
    <x-ui.grid-pattern :mask="true" />

    <div class="relative text-center">
        <h3 class="text-foreground text-2xl font-semibold tracking-tight">Soft edges</h3>
        <p class="text-muted-foreground mt-1 text-sm">The grid dissolves toward the borders.</p>
    </div>
</div>