Pagination Components
Beautiful, responsive pagination components built with TailwindCSS and AlpineJS. Perfect for navigating through large datasets and content pages.
1. Basic Numbered Pagination
A standard numbered pagination component with previous/next buttons and page number indicators.
<!-- Basic Numbered Pagination -->
<nav class="flex items-center justify-between border-t border-gray-200 bg-white px-4 py-3 sm:px-6" aria-label="Pagination">
<div class="hidden sm:block">
<p class="text-sm text-gray-700">
Showing
<span class="font-medium">1</span>
to
<span class="font-medium">10</span>
of
<span class="font-medium">100</span>
results
</p>
</div>
<div class="flex flex-1 justify-between sm:justify-end">
<button class="relative inline-flex items-center rounded-md bg-white px-3 py-2 text-sm font-semibold text-gray-900 ring-1 ring-inset ring-gray-300 hover:bg-gray-50 focus-visible:outline-offset-0">
Previous
</button>
<div class="flex items-center space-x-2">
<button class="relative inline-flex items-center px-4 py-2 text-sm font-semibold text-gray-900 ring-1 ring-inset ring-gray-300 hover:bg-gray-50 focus:z-20 focus:outline-offset-0">1</button>
<button class="relative z-10 inline-flex items-center bg-purple-600 px-4 py-2 text-sm font-semibold text-white focus:z-20 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-purple-600">2</button>
<button class="relative inline-flex items-center px-4 py-2 text-sm font-semibold text-gray-900 ring-1 ring-inset ring-gray-300 hover:bg-gray-50 focus:z-20 focus:outline-offset-0">3</button>
<span class="relative inline-flex items-center px-4 py-2 text-sm font-semibold text-gray-700 ring-1 ring-inset ring-gray-300 focus:outline-offset-0">...</span>
<button class="relative inline-flex items-center px-4 py-2 text-sm font-semibold text-gray-900 ring-1 ring-inset ring-gray-300 hover:bg-gray-50 focus:z-20 focus:outline-offset-0">10</button>
</div>
<button class="relative ml-3 inline-flex items-center rounded-md bg-white px-3 py-2 text-sm font-semibold text-gray-900 ring-1 ring-inset ring-gray-300 hover:bg-gray-50 focus-visible:outline-offset-0">
Next
</button>
</div>
</nav><template>
<!-- Basic Numbered Pagination -->
<nav class="flex items-center justify-between border-t border-gray-200 bg-white px-4 py-3 sm:px-6" aria-label="Pagination">
<div class="hidden sm:block">
<p class="text-sm text-gray-700">
Showing
<span class="font-medium">1</span>
to
<span class="font-medium">10</span>
of
<span class="font-medium">100</span>
results
</p>
</div>
<div class="flex flex-1 justify-between sm:justify-end">
<button class="relative inline-flex items-center rounded-md bg-white px-3 py-2 text-sm font-semibold text-gray-900 ring-1 ring-inset ring-gray-300 hover:bg-gray-50 focus-visible:outline-offset-0">
Previous
</button>
<div class="flex items-center space-x-2">
<button class="relative inline-flex items-center px-4 py-2 text-sm font-semibold text-gray-900 ring-1 ring-inset ring-gray-300 hover:bg-gray-50 focus:z-20 focus:outline-offset-0">1</button>
<button class="relative z-10 inline-flex items-center bg-purple-600 px-4 py-2 text-sm font-semibold text-white focus:z-20 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-purple-600">2</button>
<button class="relative inline-flex items-center px-4 py-2 text-sm font-semibold text-gray-900 ring-1 ring-inset ring-gray-300 hover:bg-gray-50 focus:z-20 focus:outline-offset-0">3</button>
<span class="relative inline-flex items-center px-4 py-2 text-sm font-semibold text-gray-700 ring-1 ring-inset ring-gray-300 focus:outline-offset-0">...</span>
<button class="relative inline-flex items-center px-4 py-2 text-sm font-semibold text-gray-900 ring-1 ring-inset ring-gray-300 hover:bg-gray-50 focus:z-20 focus:outline-offset-0">10</button>
</div>
<button class="relative ml-3 inline-flex items-center rounded-md bg-white px-3 py-2 text-sm font-semibold text-gray-900 ring-1 ring-inset ring-gray-300 hover:bg-gray-50 focus-visible:outline-offset-0">
Next
</button>
</div>
</nav>
</template>export default function BasicPagination() {
return (
<nav className="flex items-center justify-between border-t border-gray-200 bg-white px-4 py-3 sm:px-6" aria-label="Pagination">
<div className="hidden sm:block">
<p className="text-sm text-gray-700">
Showing
<span className="font-medium">1</span>
to
<span className="font-medium">10</span>
of
<span className="font-medium">100</span>
results
</p>
</div>
<div className="flex flex-1 justify-between sm:justify-end">
<button className="relative inline-flex items-center rounded-md bg-white px-3 py-2 text-sm font-semibold text-gray-900 ring-1 ring-inset ring-gray-300 hover:bg-gray-50 focus-visible:outline-offset-0">
Previous
</button>
<div className="flex items-center space-x-2">
<button className="relative inline-flex items-center px-4 py-2 text-sm font-semibold text-gray-900 ring-1 ring-inset ring-gray-300 hover:bg-gray-50 focus:z-20 focus:outline-offset-0">1</button>
<button className="relative z-10 inline-flex items-center bg-purple-600 px-4 py-2 text-sm font-semibold text-white focus:z-20 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-purple-600">2</button>
<button className="relative inline-flex items-center px-4 py-2 text-sm font-semibold text-gray-900 ring-1 ring-inset ring-gray-300 hover:bg-gray-50 focus:z-20 focus:outline-offset-0">3</button>
<span className="relative inline-flex items-center px-4 py-2 text-sm font-semibold text-gray-700 ring-1 ring-inset ring-gray-300 focus:outline-offset-0">...</span>
<button className="relative inline-flex items-center px-4 py-2 text-sm font-semibold text-gray-900 ring-1 ring-inset ring-gray-300 hover:bg-gray-50 focus:z-20 focus:outline-offset-0">10</button>
</div>
<button className="relative ml-3 inline-flex items-center rounded-md bg-white px-3 py-2 text-sm font-semibold text-gray-900 ring-1 ring-inset ring-gray-300 hover:bg-gray-50 focus-visible:outline-offset-0">
Next
</button>
</div>
</nav>
);
}2. Simple Previous/Next Pagination
A minimal pagination component with just previous and next buttons, perfect for simple navigation.
<!-- Simple Previous/Next Pagination -->
<nav class="isolate inline-flex -space-x-px rounded-md shadow-sm" aria-label="Pagination">
<button class="relative inline-flex items-center rounded-l-md px-2 py-2 text-gray-400 ring-1 ring-inset ring-gray-300 hover:bg-gray-50 focus:z-20 focus:outline-offset-0">
<span class="sr-only">Previous</span>
<svg class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
<path fill-rule="evenodd" d="M12.79 5.23a.75.75 0 01-.02 1.06L8.832 10l3.938 3.71a.75.75 0 11-1.04 1.08l-4.5-4.25a.75.75 0 010-1.08l4.5-4.25a.75.75 0 011.06.02z" clip-rule="evenodd" />
</svg>
</button>
<div class="relative inline-flex items-center px-4 py-2 text-sm font-semibold text-gray-900 ring-1 ring-inset ring-gray-300 focus:z-20 focus:outline-offset-0">
Page 1 of 5
</div>
<button class="relative inline-flex items-center rounded-r-md px-2 py-2 text-gray-400 ring-1 ring-inset ring-gray-300 hover:bg-gray-50 focus:z-20 focus:outline-offset-0">
<span class="sr-only">Next</span>
<svg class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
<path fill-rule="evenodd" d="M7.21 14.77a.75.75 0 01.02-1.06L11.168 10 7.23 6.29a.75.75 0 111.04-1.08l4.5 4.25a.75.75 0 010 1.08l-4.5 4.25a.75.75 0 01-1.06-.02z" clip-rule="evenodd" />
</svg>
</button>
</nav><template>
<!-- Simple Previous/Next Pagination -->
<nav class="isolate inline-flex -space-x-px rounded-md shadow-sm" aria-label="Pagination">
<button class="relative inline-flex items-center rounded-l-md px-2 py-2 text-gray-400 ring-1 ring-inset ring-gray-300 hover:bg-gray-50 focus:z-20 focus:outline-offset-0">
<span class="sr-only">Previous</span>
<svg class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
<path fill-rule="evenodd" d="M12.79 5.23a.75.75 0 01-.02 1.06L8.832 10l3.938 3.71a.75.75 0 11-1.04 1.08l-4.5-4.25a.75.75 0 010-1.08l4.5-4.25a.75.75 0 011.06.02z" clip-rule="evenodd" />
</svg>
</button>
<div class="relative inline-flex items-center px-4 py-2 text-sm font-semibold text-gray-900 ring-1 ring-inset ring-gray-300 focus:z-20 focus:outline-offset-0">
Page 1 of 5
</div>
<button class="relative inline-flex items-center rounded-r-md px-2 py-2 text-gray-400 ring-1 ring-inset ring-gray-300 hover:bg-gray-50 focus:z-20 focus:outline-offset-0">
<span class="sr-only">Next</span>
<svg class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
<path fill-rule="evenodd" d="M7.21 14.77a.75.75 0 01.02-1.06L11.168 10 7.23 6.29a.75.75 0 111.04-1.08l4.5 4.25a.75.75 0 010 1.08l-4.5 4.25a.75.75 0 01-1.06-.02z" clip-rule="evenodd" />
</svg>
</button>
</nav>
</template>export default function SimplePagination() {
return (
<nav className="isolate inline-flex -space-x-px rounded-md shadow-sm" aria-label="Pagination">
<button className="relative inline-flex items-center rounded-l-md px-2 py-2 text-gray-400 ring-1 ring-inset ring-gray-300 hover:bg-gray-50 focus:z-20 focus:outline-offset-0">
<span className="sr-only">Previous</span>
<svg className="h-5 w-5" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
<path fillRule="evenodd" d="M12.79 5.23a.75.75 0 01-.02 1.06L8.832 10l3.938 3.71a.75.75 0 11-1.04 1.08l-4.5-4.25a.75.75 0 010-1.08l4.5-4.25a.75.75 0 011.06.02z" clipRule="evenodd" />
</svg>
</button>
<div className="relative inline-flex items-center px-4 py-2 text-sm font-semibold text-gray-900 ring-1 ring-inset ring-gray-300 focus:z-20 focus:outline-offset-0">
Page 1 of 5
</div>
<button className="relative inline-flex items-center rounded-r-md px-2 py-2 text-gray-400 ring-1 ring-inset ring-gray-300 hover:bg-gray-50 focus:z-20 focus:outline-offset-0">
<span className="sr-only">Next</span>
<svg className="h-5 w-5" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
<path fillRule="evenodd" d="M7.21 14.77a.75.75 0 01.02-1.06L11.168 10 7.23 6.29a.75.75 0 111.04-1.08l4.5 4.25a.75.75 0 010 1.08l-4.5 4.25a.75.75 0 01-1.06-.02z" clipRule="evenodd" />
</svg>
</button>
</nav>
);
}3. Advanced Pagination with Page Size
An advanced pagination component with page size selector, jump to page functionality, and detailed information display.
per page
Showing 1 to
10 of
250 results
<!-- Advanced Pagination with Page Size -->
<div class="flex flex-col items-center space-y-4">
<!-- Page Size Selector -->
<div class="flex items-center space-x-2">
<label class="text-sm font-medium text-gray-700">Show:</label>
<select class="rounded-md border-gray-300 shadow-sm focus:border-purple-600 focus:ring-purple-600 text-sm">
<option value="5">5</option>
<option value="10" selected>10</option>
<option value="25">25</option>
<option value="50">50</option>
</select>
<span class="text-sm text-gray-500">per page</span>
</div>
<!-- Pagination Info -->
<div class="text-sm text-gray-700">
Showing <span class="font-medium">1</span> to <span class="font-medium">10</span> of <span class="font-medium">250</span> results
</div>
<!-- Main Pagination -->
<nav class="flex items-center space-x-1" aria-label="Pagination">
<button class="relative inline-flex items-center rounded-l-md px-2 py-2 text-gray-400 ring-1 ring-inset ring-gray-300 hover:bg-gray-50">
<svg class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd" d="M15.79 14.77a.75.75 0 01-1.06.02l-4.5-4.25a.75.75 0 010-1.08l4.5-4.25a.75.75 0 111.06 1.06L11.832 10l3.938 3.71a.75.75 0 01.02 1.06zm-6 0a.75.75 0 01-1.06.02l-4.5-4.25a.75.75 0 010-1.08l4.5-4.25a.75.75 0 111.06 1.06L5.832 10l3.938 3.71a.75.75 0 01.02 1.06z" clip-rule="evenodd" />
</svg>
</button>
<button class="relative inline-flex items-center px-2 py-2 text-gray-400 ring-1 ring-inset ring-gray-300 hover:bg-gray-50">
<svg class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd" d="M12.79 5.23a.75.75 0 01-.02 1.06L8.832 10l3.938 3.71a.75.75 0 11-1.04 1.08l-4.5-4.25a.75.75 0 010-1.08l4.5-4.25a.75.75 0 011.06.02z" clip-rule="evenodd" />
</svg>
</button>
<div class="flex items-center space-x-2">
<button class="relative inline-flex items-center px-4 py-2 text-sm font-semibold text-gray-900 ring-1 ring-inset ring-gray-300 hover:bg-gray-50">1</button>
<button class="relative z-10 inline-flex items-center bg-purple-600 px-4 py-2 text-sm font-semibold text-white">2</button>
<button class="relative inline-flex items-center px-4 py-2 text-sm font-semibold text-gray-900 ring-1 ring-inset ring-gray-300 hover:bg-gray-50">3</button>
<span class="relative inline-flex items-center px-4 py-2 text-sm font-semibold text-gray-700 ring-1 ring-inset ring-gray-300">...</span>
<button class="relative inline-flex items-center px-4 py-2 text-sm font-semibold text-gray-900 ring-1 ring-inset ring-gray-300 hover:bg-gray-50">25</button>
</div>
<button class="relative inline-flex items-center px-2 py-2 text-gray-400 ring-1 ring-inset ring-gray-300 hover:bg-gray-50">
<svg class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd" d="M7.21 14.77a.75.75 0 01.02-1.06L11.168 10 7.23 6.29a.75.75 0 111.04-1.08l4.5 4.25a.75.75 0 010 1.08l-4.5 4.25a.75.75 0 01-1.06-.02z" clip-rule="evenodd" />
</svg>
</button>
<button class="relative inline-flex items-center rounded-r-md px-2 py-2 text-gray-400 ring-1 ring-inset ring-gray-300 hover:bg-gray-50">
<svg class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd" d="M4.21 5.23a.75.75 0 011.06.02l4.5 4.25a.75.75 0 010 1.08l-4.5 4.25a.75.75 0 01-1.06-1.06L7.168 10 4.23 6.29a.75.75 0 01.02-1.06zm6 0a.75.75 0 011.06.02l4.5 4.25a.75.75 0 010 1.08l-4.5 4.25a.75.75 0 11-1.06-1.06L13.168 10l-3.938-3.71a.75.75 0 01.02-1.06z" clip-rule="evenodd" />
</svg>
</button>
</nav>
<!-- Jump to Page -->
<div class="flex items-center space-x-2">
<label class="text-sm font-medium text-gray-700">Go to page:</label>
<input type="number" min="1" max="25" class="w-16 rounded-md border-gray-300 shadow-sm focus:border-purple-600 focus:ring-purple-600 text-sm text-center">
<button class="px-3 py-1 text-sm bg-purple-600 text-white rounded-md hover:bg-purple-500">Go</button>
</div>
</div><template>
<!-- Advanced Pagination with Page Size -->
<div class="flex flex-col items-center space-y-4">
<!-- Page Size Selector -->
<div class="flex items-center space-x-2">
<label class="text-sm font-medium text-gray-700">Show:</label>
<select class="rounded-md border-gray-300 shadow-sm focus:border-purple-600 focus:ring-purple-600 text-sm">
<option value="5">5</option>
<option value="10" selected>10</option>
<option value="25">25</option>
<option value="50">50</option>
</select>
<span class="text-sm text-gray-500">per page</span>
</div>
<!-- Pagination Info -->
<div class="text-sm text-gray-700">
Showing <span class="font-medium">1</span> to <span class="font-medium">10</span> of <span class="font-medium">250</span> results
</div>
<!-- Main Pagination -->
<nav class="flex items-center space-x-1" aria-label="Pagination">
<button class="relative inline-flex items-center rounded-l-md px-2 py-2 text-gray-400 ring-1 ring-inset ring-gray-300 hover:bg-gray-50">
<svg class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd" d="M15.79 14.77a.75.75 0 01-1.06.02l-4.5-4.25a.75.75 0 010-1.08l4.5-4.25a.75.75 0 111.06 1.06L11.832 10l3.938 3.71a.75.75 0 01.02 1.06zm-6 0a.75.75 0 01-1.06.02l-4.5-4.25a.75.75 0 010-1.08l4.5-4.25a.75.75 0 111.06 1.06L5.832 10l3.938 3.71a.75.75 0 01.02 1.06z" clip-rule="evenodd" />
</svg>
</button>
<button class="relative inline-flex items-center px-2 py-2 text-gray-400 ring-1 ring-inset ring-gray-300 hover:bg-gray-50">
<svg class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd" d="M12.79 5.23a.75.75 0 01-.02 1.06L8.832 10l3.938 3.71a.75.75 0 11-1.04 1.08l-4.5-4.25a.75.75 0 010-1.08l4.5-4.25a.75.75 0 011.06.02z" clip-rule="evenodd" />
</svg>
</button>
<div class="flex items-center space-x-2">
<button class="relative inline-flex items-center px-4 py-2 text-sm font-semibold text-gray-900 ring-1 ring-inset ring-gray-300 hover:bg-gray-50">1</button>
<button class="relative z-10 inline-flex items-center bg-purple-600 px-4 py-2 text-sm font-semibold text-white">2</button>
<button class="relative inline-flex items-center px-4 py-2 text-sm font-semibold text-gray-900 ring-1 ring-inset ring-gray-300 hover:bg-gray-50">3</button>
<span class="relative inline-flex items-center px-4 py-2 text-sm font-semibold text-gray-700 ring-1 ring-inset ring-gray-300">...</span>
<button class="relative inline-flex items-center px-4 py-2 text-sm font-semibold text-gray-900 ring-1 ring-inset ring-gray-300 hover:bg-gray-50">25</button>
</div>
<button class="relative inline-flex items-center px-2 py-2 text-gray-400 ring-1 ring-inset ring-gray-300 hover:bg-gray-50">
<svg class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd" d="M7.21 14.77a.75.75 0 01.02-1.06L11.168 10 7.23 6.29a.75.75 0 111.04-1.08l4.5 4.25a.75.75 0 010 1.08l-4.5 4.25a.75.75 0 01-1.06-.02z" clip-rule="evenodd" />
</svg>
</button>
<button class="relative inline-flex items-center rounded-r-md px-2 py-2 text-gray-400 ring-1 ring-inset ring-gray-300 hover:bg-gray-50">
<svg class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd" d="M4.21 5.23a.75.75 0 011.06.02l4.5 4.25a.75.75 0 010 1.08l-4.5 4.25a.75.75 0 01-1.06-1.06L7.168 10 4.23 6.29a.75.75 0 01.02-1.06zm6 0a.75.75 0 011.06.02l4.5 4.25a.75.75 0 010 1.08l-4.5 4.25a.75.75 0 11-1.06-1.06L13.168 10l-3.938-3.71a.75.75 0 01.02-1.06z" clip-rule="evenodd" />
</svg>
</button>
</nav>
<!-- Jump to Page -->
<div class="flex items-center space-x-2">
<label class="text-sm font-medium text-gray-700">Go to page:</label>
<input type="number" min="1" max="25" class="w-16 rounded-md border-gray-300 shadow-sm focus:border-purple-600 focus:ring-purple-600 text-sm text-center">
<button class="px-3 py-1 text-sm bg-purple-600 text-white rounded-md hover:bg-purple-500">Go</button>
</div>
</div>
</template>export default function AdvancedPagination() {
return (
<div className="flex flex-col items-center space-y-4">
<!-- Page Size Selector -->
<div className="flex items-center space-x-2">
<label className="text-sm font-medium text-gray-700">Show:</label>
<select className="rounded-md border-gray-300 shadow-sm focus:border-purple-600 focus:ring-purple-600 text-sm">
<option value="5">5</option>
<option value="10">10</option>
<option value="25">25</option>
<option value="50">50</option>
</select>
<span className="text-sm text-gray-500">per page</span>
</div>
<!-- Pagination Info -->
<div className="text-sm text-gray-700">
Showing <span className="font-medium">1</span> to <span className="font-medium">10</span> of <span className="font-medium">250</span> results
</div>
<!-- Main Pagination -->
<nav className="flex items-center space-x-1" aria-label="Pagination">
<button className="relative inline-flex items-center rounded-l-md px-2 py-2 text-gray-400 ring-1 ring-inset ring-gray-300 hover:bg-gray-50">
<svg className="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
<path fillRule="evenodd" d="M15.79 14.77a.75.75 0 01-1.06.02l-4.5-4.25a.75.75 0 010-1.08l4.5-4.25a.75.75 0 111.06 1.06L11.832 10l3.938 3.71a.75.75 0 01.02 1.06zm-6 0a.75.75 0 01-1.06.02l-4.5-4.25a.75.75 0 010-1.08l4.5-4.25a.75.75 0 111.06 1.06L5.832 10l3.938 3.71a.75.75 0 01.02 1.06z" clipRule="evenodd" />
</svg>
</button>
<button className="relative inline-flex items-center px-2 py-2 text-gray-400 ring-1 ring-inset ring-gray-300 hover:bg-gray-50">
<svg className="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
<path fillRule="evenodd" d="M12.79 5.23a.75.75 0 01-.02 1.06L8.832 10l3.938 3.71a.75.75 0 11-1.04 1.08l-4.5-4.25a.75.75 0 010-1.08l4.5-4.25a.75.75 0 011.06.02z" clipRule="evenodd" />
</svg>
</button>
<div className="flex items-center space-x-2">
<button className="relative inline-flex items-center px-4 py-2 text-sm font-semibold text-gray-900 ring-1 ring-inset ring-gray-300 hover:bg-gray-50">1</button>
<button className="relative z-10 inline-flex items-center bg-purple-600 px-4 py-2 text-sm font-semibold text-white">2</button>
<button className="relative inline-flex items-center px-4 py-2 text-sm font-semibold text-gray-900 ring-1 ring-inset ring-gray-300 hover:bg-gray-50">3</button>
<span className="relative inline-flex items-center px-4 py-2 text-sm font-semibold text-gray-700 ring-1 ring-inset ring-gray-300">...</span>
<button className="relative inline-flex items-center px-4 py-2 text-sm font-semibold text-gray-900 ring-1 ring-inset ring-gray-300 hover:bg-gray-50">25</button>
</div>
<button className="relative inline-flex items-center px-2 py-2 text-gray-400 ring-1 ring-inset ring-gray-300 hover:bg-gray-50">
<svg className="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
<path fillRule="evenodd" d="M7.21 14.77a.75.75 0 01.02-1.06L11.168 10 7.23 6.29a.75.75 0 111.04-1.08l4.5 4.25a.75.75 0 010 1.08l-4.5 4.25a.75.75 0 01-1.06-.02z" clipRule="evenodd" />
</svg>
</button>
<button className="relative inline-flex items-center rounded-r-md px-2 py-2 text-gray-400 ring-1 ring-inset ring-gray-300 hover:bg-gray-50">
<svg className="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
<path fillRule="evenodd" d="M4.21 5.23a.75.75 0 011.06.02l4.5 4.25a.75.75 0 010 1.08l-4.5 4.25a.75.75 0 01-1.06-1.06L7.168 10 4.23 6.29a.75.75 0 01.02-1.06zm6 0a.75.75 0 011.06.02l4.5 4.25a.75.75 0 010 1.08l-4.5 4.25a.75.75 0 11-1.06-1.06L13.168 10l-3.938-3.71a.75.75 0 01.02-1.06z" clipRule="evenodd" />
</svg>
</button>
</nav>
<!-- Jump to Page -->
<div className="flex items-center space-x-2">
<label className="text-sm font-medium text-gray-700">Go to page:</label>
<input type="number" min="1" max="25" className="w-16 rounded-md border-gray-300 shadow-sm focus:border-purple-600 focus:ring-purple-600 text-sm text-center">
<button className="px-3 py-1 text-sm bg-purple-600 text-white rounded-md hover:bg-purple-500">Go</button>
</div>
</div>
);
}4. Compact Pagination with Icons
A compact pagination component with icon buttons and minimal styling, perfect for tight spaces.
<!-- Compact Pagination with Icons -->
<nav class="flex items-center space-x-1" aria-label="Pagination">
<button class="p-2 rounded-md text-gray-400 hover:text-gray-600 hover:bg-gray-100">
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"></path>
</svg>
</button>
<div class="flex items-center space-x-1">
<button class="px-3 py-2 text-sm font-medium text-gray-500 hover:text-gray-700 hover:bg-gray-100 rounded-md">1</button>
<button class="px-3 py-2 text-sm font-medium text-white bg-purple-600 rounded-md">2</button>
<button class="px-3 py-2 text-sm font-medium text-gray-500 hover:text-gray-700 hover:bg-gray-100 rounded-md">3</button>
<span class="px-2 text-gray-400">...</span>
<button class="px-3 py-2 text-sm font-medium text-gray-500 hover:text-gray-700 hover:bg-gray-100 rounded-md">10</button>
</div>
<button class="p-2 rounded-md text-gray-400 hover:text-gray-600 hover:bg-gray-100">
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path>
</svg>
</button>
</nav><template>
<!-- Compact Pagination with Icons -->
<nav class="flex items-center space-x-1" aria-label="Pagination">
<button class="p-2 rounded-md text-gray-400 hover:text-gray-600 hover:bg-gray-100">
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"></path>
</svg>
</button>
<div class="flex items-center space-x-1">
<button class="px-3 py-2 text-sm font-medium text-gray-500 hover:text-gray-700 hover:bg-gray-100 rounded-md">1</button>
<button class="px-3 py-2 text-sm font-medium text-white bg-purple-600 rounded-md">2</button>
<button class="px-3 py-2 text-sm font-medium text-gray-500 hover:text-gray-700 hover:bg-gray-100 rounded-md">3</button>
<span class="px-2 text-gray-400">...</span>
<button class="px-3 py-2 text-sm font-medium text-gray-500 hover:text-gray-700 hover:bg-gray-100 rounded-md">10</button>
</div>
<button class="p-2 rounded-md text-gray-400 hover:text-gray-600 hover:bg-gray-100">
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path>
</svg>
</button>
</nav>
</template>export default function CompactPagination() {
return (
<nav className="flex items-center space-x-1" aria-label="Pagination">
<button className="p-2 rounded-md text-gray-400 hover:text-gray-600 hover:bg-gray-100">
<svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M15 19l-7-7 7-7"></path>
</svg>
</button>
<div className="flex items-center space-x-1">
<button className="px-3 py-2 text-sm font-medium text-gray-500 hover:text-gray-700 hover:bg-gray-100 rounded-md">1</button>
<button className="px-3 py-2 text-sm font-medium text-white bg-purple-600 rounded-md">2</button>
<button className="px-3 py-2 text-sm font-medium text-gray-500 hover:text-gray-700 hover:bg-gray-100 rounded-md">3</button>
<span className="px-2 text-gray-400">...</span>
<button className="px-3 py-2 text-sm font-medium text-gray-500 hover:text-gray-700 hover:bg-gray-100 rounded-md">10</button>
</div>
<button className="p-2 rounded-md text-gray-400 hover:text-gray-600 hover:bg-gray-100">
<svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M9 5l7 7-7 7"></path>
</svg>
</button>
</nav>
);
}5. Modern Pagination with Gradient Buttons
A sleek, modern pagination component featuring gradient backgrounds, smooth shadows, and contemporary styling for a polished look.
<!-- Modern Pagination with Gradient Buttons -->
<nav class="flex items-center space-x-2" aria-label="Pagination">
<button class="flex items-center px-4 py-2 text-sm font-medium text-white bg-gradient-to-r from-purple-500 to-purple-600 rounded-full shadow-lg hover:shadow-xl transform hover:scale-105 transition-all duration-200">
<svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"></path>
</svg>
Previous
</button>
<div class="flex items-center space-x-1">
<button class="px-4 py-2 text-sm font-medium text-gray-600 bg-white rounded-full shadow-md hover:shadow-lg hover:bg-gray-50 transition-all duration-200">1</button>
<button class="px-4 py-2 text-sm font-medium text-white bg-gradient-to-r from-purple-500 to-purple-600 rounded-full shadow-lg hover:shadow-xl transform hover:scale-105 transition-all duration-200">2</button>
<button class="px-4 py-2 text-sm font-medium text-gray-600 bg-white rounded-full shadow-md hover:shadow-lg hover:bg-gray-50 transition-all duration-200">3</button>
<span class="px-3 text-gray-400">...</span>
<button class="px-4 py-2 text-sm font-medium text-gray-600 bg-white rounded-full shadow-md hover:shadow-lg hover:bg-gray-50 transition-all duration-200">10</button>
</div>
<button class="flex items-center px-4 py-2 text-sm font-medium text-white bg-gradient-to-r from-purple-500 to-purple-600 rounded-full shadow-lg hover:shadow-xl transform hover:scale-105 transition-all duration-200">
Next
<svg class="w-4 h-4 ml-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path>
</svg>
</button>
</nav><template>
<!-- Modern Pagination with Gradient Buttons -->
<nav class="flex items-center space-x-2" aria-label="Pagination">
<button class="flex items-center px-4 py-2 text-sm font-medium text-white bg-gradient-to-r from-purple-500 to-purple-600 rounded-full shadow-lg hover:shadow-xl transform hover:scale-105 transition-all duration-200">
<svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"></path>
</svg>
Previous
</button>
<div class="flex items-center space-x-1">
<button class="px-4 py-2 text-sm font-medium text-gray-600 bg-white rounded-full shadow-md hover:shadow-lg hover:bg-gray-50 transition-all duration-200">1</button>
<button class="px-4 py-2 text-sm font-medium text-white bg-gradient-to-r from-purple-500 to-purple-600 rounded-full shadow-lg hover:shadow-xl transform hover:scale-105 transition-all duration-200">2</button>
<button class="px-4 py-2 text-sm font-medium text-gray-600 bg-white rounded-full shadow-md hover:shadow-lg hover:bg-gray-50 transition-all duration-200">3</button>
<span class="px-3 text-gray-400">...</span>
<button class="px-4 py-2 text-sm font-medium text-gray-600 bg-white rounded-full shadow-md hover:shadow-lg hover:bg-gray-50 transition-all duration-200">10</button>
</div>
<button class="flex items-center px-4 py-2 text-sm font-medium text-white bg-gradient-to-r from-purple-500 to-purple-600 rounded-full shadow-lg hover:shadow-xl transform hover:scale-105 transition-all duration-200">
Next
<svg class="w-4 h-4 ml-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path>
</svg>
</button>
</nav>
</template>export default function ModernGradientPagination() {
return (
<nav className="flex items-center space-x-2" aria-label="Pagination">
<button className="flex items-center px-4 py-2 text-sm font-medium text-white bg-gradient-to-r from-purple-500 to-purple-600 rounded-full shadow-lg hover:shadow-xl transform hover:scale-105 transition-all duration-200">
<svg className="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M15 19l-7-7 7-7"></path>
</svg>
Previous
</button>
<div className="flex items-center space-x-1">
<button className="px-4 py-2 text-sm font-medium text-gray-600 bg-white rounded-full shadow-md hover:shadow-lg hover:bg-gray-50 transition-all duration-200">1</button>
<button className="px-4 py-2 text-sm font-medium text-white bg-gradient-to-r from-purple-500 to-purple-600 rounded-full shadow-lg hover:shadow-xl transform hover:scale-105 transition-all duration-200">2</button>
<button className="px-4 py-2 text-sm font-medium text-gray-600 bg-white rounded-full shadow-md hover:shadow-lg hover:bg-gray-50 transition-all duration-200">3</button>
<span className="px-3 text-gray-400">...</span>
<button className="px-4 py-2 text-sm font-medium text-gray-600 bg-white rounded-full shadow-md hover:shadow-lg hover:bg-gray-50 transition-all duration-200">10</button>
</div>
<button className="flex items-center px-4 py-2 text-sm font-medium text-white bg-gradient-to-r from-purple-500 to-purple-600 rounded-full shadow-lg hover:shadow-xl transform hover:scale-105 transition-all duration-200">
Next
<svg className="w-4 h-4 ml-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M9 5l7 7-7 7"></path>
</svg>
</button>
</nav>
);
}