Basic Pagination

Item 1
Item 2
Item 3
Item 4
Item 5
Item 6
Item 7
Item 8
Item 9
Item 10
Showing 1 to 10 of 150 results
1 2 3 ... 15

Compact Variant

Item 21
Item 22
Item 23
Item 24
Item 25
Item 26
Item 27
Item 28
Item 29
Item 30
Showing 21 to 30 of 150 results
Page 3 of 15

Without Info

Item 1
Item 2
Item 3
Item 4
Item 5
Item 6
Item 7
Item 8
Item 9
Item 10
1 2 3 ... 15

Custom onEachSide

Item 71
Item 72
Item 73
Item 74
Item 75
Item 76
Item 77
Item 78
Item 79
Item 80
Showing 71 to 80 of 150 results
1 ... 5 6 7 8 9 10 11 ... 15

First Page

Item 1
Item 2
Item 3
Item 4
Item 5
Item 6
Item 7
Item 8
Item 9
Item 10
Showing 1 to 10 of 150 results
1 2 3 ... 15

Last Page

Item 141
Item 142
Item 143
Item 144
Item 145
Item 146
Item 147
Item 148
Item 149
Item 150
Showing 141 to 150 of 150 results
1 ... 13 14 15

Pagination Component

A flexible pagination component that works with Laravel's LengthAwarePaginator. Supports both standard HTTP navigation and Livewire wire models.

Props

  • paginator - LengthAwarePaginator (required) - The paginated data from Laravel
  • variant - string - 'default' | 'compact' (default: 'default')
  • wireModel - string|null - Livewire component property name for wire navigation (default: null)
  • showInfo - bool - Show "Showing X to Y of Z results" (default: true)
  • onEachSide - int - Number of pages to show on each side of current page (default: 2)

Variants

  • default - Shows page numbers with ellipsis for large page counts
  • compact - Shows "Page X of Y" format instead of individual page numbers

Livewire Support

When using with Livewire, pass the component property name to wireModel: 

<x-ui.pagination :paginator="$users" wire-model="users" />

The component will automatically use wire:click for navigation instead of regular links.

Features

  • • Automatic ellipsis for large page counts
  • • First and last page shortcuts
  • • Previous/Next navigation buttons
  • • Results info display (customizable)
  • • Livewire wire model support
  • • Responsive design
  • • Dark mode support
  • • Accessible with proper ARIA labels
  • • Disabled states for first/last pages

Common Use Cases

Standard HTTP Pagination:

// In Controller
$users = User::paginate(15);

// In Blade
<x-ui.pagination :paginator="$users" />

Livewire Pagination:

// In Livewire Component
public function render()
{
    $users = User::paginate(15);
    return view('livewire.users', compact('users'));
}

// In Blade
<x-ui.pagination :paginator="$users" wire-model="users" />

Compact Variant:

<x-ui.pagination :paginator="$items" variant="compact" />

Without Info:

<x-ui.pagination :paginator="$items" :show-info="false" />

Custom Page Range:

<x-ui.pagination :paginator="$items" :on-each-side="3" />

Controller Example

public function index()
{
    $items = Item::query()
        ->when(request('search'), fn($q) => $q->where('name', 'like', '%'.request('search').'%'))
        ->orderBy('created_at', 'desc')
        ->paginate(15);
    
    return view('items.index', compact('items'));
}