---
title: "pagination"
description: "Page navigation with previous, next, numbered links and an ellipsis."
category: "Navigation"
---
# pagination
Page navigation with previous, next, numbered links and an ellipsis.
## Installation
```bash
php artisan ui:add pagination
```
## Dependencies
- composer: `gehrisandro/tailwind-merge-laravel`
## Usage
```blade
{{-- Hand-built --}}
2
{{-- Driven by a Laravel paginator --}}
@foreach ($posts->getUrlRange(1, $posts->lastPage()) as $page => $url)
{{ $page }}
@endforeach
```
## Example
The demo rendered on the docs page.
```blade
1
2
3
```
## Source
Copy each file to the path shown above it.
`resources/views/components/ui/pagination/index.blade.php`
```blade
@props([])
@php
$classes = \TailwindMerge\Laravel\Facades\TailwindMerge::merge(
'mx-auto flex w-full justify-center',
$attributes->get('class'),
);
@endphp
```
`resources/views/components/ui/pagination/content.blade.php`
```blade
@props([])
@php
$classes = \TailwindMerge\Laravel\Facades\TailwindMerge::merge(
'flex flex-row items-center gap-1',
$attributes->get('class'),
);
@endphp
except('class')->merge(['class' => $classes]) }}>
{{ $slot }}
```
`resources/views/components/ui/pagination/item.blade.php`
```blade
@props([])
@php
$classes = \TailwindMerge\Laravel\Facades\TailwindMerge::merge(
'',
$attributes->get('class'),
);
@endphp
except('class')->merge(['class' => $classes]) }}>
{{ $slot }}
```
`resources/views/components/ui/pagination/link.blade.php`
```blade
@props([
'href' => '#',
'isActive' => false,
'size' => 'icon',
])
@php
$base =
'inline-flex items-center justify-center gap-1 whitespace-nowrap rounded-md text-sm font-medium outline-none transition-colors focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-disabled:pointer-events-none aria-disabled:opacity-50';
// The current page reads as an outline button, the rest as ghost buttons.
$state = $isActive
? 'border border-input bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:hover:bg-input/50'
: 'hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50';
$sizes = match ($size) {
'sm' => 'h-8 px-3',
'lg' => 'h-10 px-6',
'md' => 'h-9 px-4 py-2',
default => 'size-9',
};
$classes = \TailwindMerge\Laravel\Facades\TailwindMerge::merge(
$base,
$state,
$sizes,
$attributes->get('class'),
);
@endphp
except('class')->merge(['class' => $classes]) }}>
{{ $slot }}
```
`resources/views/components/ui/pagination/previous.blade.php`
```blade
@props([
'href' => '#',
'label' => 'Previous',
])
@php
$classes = \TailwindMerge\Laravel\Facades\TailwindMerge::merge(
'inline-flex h-9 items-center justify-center gap-1 whitespace-nowrap rounded-md px-2.5 text-sm font-medium outline-none transition-colors hover:bg-accent hover:text-accent-foreground focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-disabled:pointer-events-none aria-disabled:opacity-50 dark:hover:bg-accent/50',
$attributes->get('class'),
);
@endphp
except('class')->merge(['class' => $classes]) }}>
{{ $slot->isNotEmpty() ? $slot : $label }}
```
`resources/views/components/ui/pagination/next.blade.php`
```blade
@props([
'href' => '#',
'label' => 'Next',
])
@php
$classes = \TailwindMerge\Laravel\Facades\TailwindMerge::merge(
'inline-flex h-9 items-center justify-center gap-1 whitespace-nowrap rounded-md px-2.5 text-sm font-medium outline-none transition-colors hover:bg-accent hover:text-accent-foreground focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-disabled:pointer-events-none aria-disabled:opacity-50 dark:hover:bg-accent/50',
$attributes->get('class'),
);
@endphp
except('class')->merge(['class' => $classes]) }}>
{{ $slot->isNotEmpty() ? $slot : $label }}
```
`resources/views/components/ui/pagination/ellipsis.blade.php`
```blade
@props([])
@php
$classes = \TailwindMerge\Laravel\Facades\TailwindMerge::merge(
'flex size-9 items-center justify-center',
$attributes->get('class'),
);
@endphp
except('class')->merge(['class' => $classes]) }}>
More pages
```
## Theme tokens
`--accent`, `--background`, `--input`, `--ring`
No JavaScript. Plain links, so it works with a Laravel paginator or a hand-built list; mark the current page with :is-active on the link.