blatui

Components

Pagination

Pagination with page navigation, next and previous links.

php artisan blatui:add pagination 
<x-ui.pagination>
    <x-ui.pagination-content>
        <x-ui.pagination-item>
            <x-ui.pagination-previous href="#" />
        </x-ui.pagination-item>
        <x-ui.pagination-item>
            <x-ui.pagination-link href="#">1</x-ui.pagination-link>
        </x-ui.pagination-item>
        <x-ui.pagination-item>
            <x-ui.pagination-link href="#" :isActive="true">2</x-ui.pagination-link>
        </x-ui.pagination-item>
        <x-ui.pagination-item>
            <x-ui.pagination-link href="#">3</x-ui.pagination-link>
        </x-ui.pagination-item>
        <x-ui.pagination-item>
            <x-ui.pagination-ellipsis />
        </x-ui.pagination-item>
        <x-ui.pagination-item>
            <x-ui.pagination-next href="#" />
        </x-ui.pagination-item>
    </x-ui.pagination-content>
</x-ui.pagination>

Contained

{{-- The whole control wrapped in a bordered container. --}}
<x-ui.pagination>
    <x-ui.pagination-content class="rounded-lg border p-1">
        <x-ui.pagination-item><x-ui.pagination-previous href="#" /></x-ui.pagination-item>
        <x-ui.pagination-item><x-ui.pagination-link href="#">1</x-ui.pagination-link></x-ui.pagination-item>
        <x-ui.pagination-item><x-ui.pagination-link href="#" :isActive="true">2</x-ui.pagination-link></x-ui.pagination-item>
        <x-ui.pagination-item><x-ui.pagination-link href="#">3</x-ui.pagination-link></x-ui.pagination-item>
        <x-ui.pagination-item><x-ui.pagination-ellipsis /></x-ui.pagination-item>
        <x-ui.pagination-item><x-ui.pagination-next href="#" /></x-ui.pagination-item>
    </x-ui.pagination-content>
</x-ui.pagination>

Rounded

{{-- Fully rounded (pill) pagination buttons. --}}
<x-ui.pagination>
    <x-ui.pagination-content>
        <x-ui.pagination-item><x-ui.pagination-previous href="#" class="rounded-full" /></x-ui.pagination-item>
        <x-ui.pagination-item><x-ui.pagination-link href="#" class="rounded-full">1</x-ui.pagination-link></x-ui.pagination-item>
        <x-ui.pagination-item><x-ui.pagination-link href="#" :isActive="true" class="rounded-full">2</x-ui.pagination-link></x-ui.pagination-item>
        <x-ui.pagination-item><x-ui.pagination-link href="#" class="rounded-full">3</x-ui.pagination-link></x-ui.pagination-item>
        <x-ui.pagination-item><x-ui.pagination-ellipsis /></x-ui.pagination-item>
        <x-ui.pagination-item><x-ui.pagination-next href="#" class="rounded-full" /></x-ui.pagination-item>
    </x-ui.pagination-content>
</x-ui.pagination>

Simple

<x-ui.pagination>
    <x-ui.pagination-content>
        <x-ui.pagination-item>
            <x-ui.pagination-previous href="#" />
        </x-ui.pagination-item>
        <x-ui.pagination-item>
            <x-ui.pagination-next href="#" />
        </x-ui.pagination-item>
    </x-ui.pagination-content>
</x-ui.pagination>

With First Last

{{-- Jump-to-first / jump-to-last buttons alongside prev/next. --}}
<x-ui.pagination>
    <x-ui.pagination-content>
        <x-ui.pagination-item>
            <x-ui.pagination-link href="#" aria-label="Go to first page" class="gap-1 px-2.5"><x-lucide-chevron-first class="size-4" /></x-ui.pagination-link>
        </x-ui.pagination-item>
        <x-ui.pagination-item><x-ui.pagination-previous href="#" /></x-ui.pagination-item>
        <x-ui.pagination-item><x-ui.pagination-link href="#">4</x-ui.pagination-link></x-ui.pagination-item>
        <x-ui.pagination-item><x-ui.pagination-link href="#" :isActive="true">5</x-ui.pagination-link></x-ui.pagination-item>
        <x-ui.pagination-item><x-ui.pagination-link href="#">6</x-ui.pagination-link></x-ui.pagination-item>
        <x-ui.pagination-item><x-ui.pagination-next href="#" /></x-ui.pagination-item>
        <x-ui.pagination-item>
            <x-ui.pagination-link href="#" aria-label="Go to last page" class="gap-1 px-2.5"><x-lucide-chevron-last class="size-4" /></x-ui.pagination-link>
        </x-ui.pagination-item>
    </x-ui.pagination-content>
</x-ui.pagination>

With Page Info

Page 1 of 10

<div class="flex w-full max-w-md items-center justify-between gap-4">
    <p class="text-muted-foreground text-sm">Page 1 of 10</p>
    <x-ui.pagination class="mx-0 w-auto justify-end">
        <x-ui.pagination-content>
            <x-ui.pagination-item>
                <x-ui.pagination-previous href="#" />
            </x-ui.pagination-item>
            <x-ui.pagination-item>
                <x-ui.pagination-next href="#" />
            </x-ui.pagination-item>
        </x-ui.pagination-content>
    </x-ui.pagination>
</div>

API Reference

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

Slots

Slot Description
default The pager composition. Wrap items in <x-ui.pagination-content>, then one <x-ui.pagination-item> per control: <x-ui.pagination-previous href> and <x-ui.pagination-next href> for the arrows, <x-ui.pagination-link href> for page numbers (pass isActive on the current page), and <x-ui.pagination-ellipsis> for gaps. Page links accept a size of default, sm, lg or icon.