blatui

Components

Gallery

A thumbnail grid that opens a full-screen lightbox with keyboard navigation.

php artisan blatui:add gallery 
<x-ui.gallery
    class="w-full max-w-xl"
    :columns="3"
    :images="[
        ['src' => 'https://images.unsplash.com/photo-1506744038136-46273834b3fb?w=1600&q=80', 'thumb' => 'https://images.unsplash.com/photo-1506744038136-46273834b3fb?w=400&q=70', 'alt' => 'A valley with a river at dusk'],
        ['src' => 'https://images.unsplash.com/photo-1501785888041-af3ef285b470?w=1600&q=80', 'thumb' => 'https://images.unsplash.com/photo-1501785888041-af3ef285b470?w=400&q=70', 'alt' => 'A lake reflecting a mountain'],
        ['src' => 'https://images.unsplash.com/photo-1470071459604-3b5ec3a7fe05?w=1600&q=80', 'thumb' => 'https://images.unsplash.com/photo-1470071459604-3b5ec3a7fe05?w=400&q=70', 'alt' => 'Foggy forested hills'],
        ['src' => 'https://images.unsplash.com/photo-1472214103451-9374bd1c798e?w=1600&q=80', 'thumb' => 'https://images.unsplash.com/photo-1472214103451-9374bd1c798e?w=400&q=70', 'alt' => 'A green field and sky'],
        ['src' => 'https://images.unsplash.com/photo-1433086966358-54859d0ed716?w=1600&q=80', 'thumb' => 'https://images.unsplash.com/photo-1433086966358-54859d0ed716?w=400&q=70', 'alt' => 'A waterfall over rocks'],
        ['src' => 'https://images.unsplash.com/photo-1518173946687-a4c8892bbd9f?w=1600&q=80', 'thumb' => 'https://images.unsplash.com/photo-1518173946687-a4c8892bbd9f?w=400&q=70', 'alt' => 'A mountain ridge above clouds'],
    ]"
/>

API Reference

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

Props

Prop Type Default Description
images* array [] The images to display. Each item is either a plain URL string or an array describing the thumbnail and the full-size image opened in the lightbox. See Each image below.
columns int 3 Number of thumbnail columns in the grid. Clamped to the 1-6 range.
1 2 3 4 5 6
rounded string 'rounded-lg' Tailwind corner-rounding utility applied to each thumbnail.

* Required.

Each image

Prop Type Default Description
src* string — URL of the full-size image shown in the lightbox.
thumb string — URL of a smaller image for the grid thumbnail. Falls back to src when omitted.
alt string '' Description of the image, used for the thumbnail alt text and the accessible button label.