Tailwind CSS Pagination Components
Page navigation for lists, search results and blogs — numbered pagination, a joined button group with a results count and simple previous/next buttons.
3 components · live preview · copy as HTML or JSX · free for commercial use
3 pagination to copy
Numbered Pagination
Pagination
aria-current="page" marks the current page for screen readers; the ellipsis is hidden from them.
<nav aria-label="Pagination">
<ul class="flex items-center gap-1 text-sm font-medium">
<li><a href="#" class="flex h-9 items-center gap-1 rounded-lg px-3 text-slate-600 transition-colors hover:bg-slate-100"><span aria-hidden="true">‹</span> Prev</a></li>
<li><a href="#" class="flex h-9 w-9 items-center justify-center rounded-lg text-slate-600 transition-colors hover:bg-slate-100">1</a></li>
<li><a href="#" aria-current="page" class="flex h-9 w-9 items-center justify-center rounded-lg bg-indigo-600 text-white">2</a></li>
<li><a href="#" class="flex h-9 w-9 items-center justify-center rounded-lg text-slate-600 transition-colors hover:bg-slate-100">3</a></li>
<li aria-hidden="true" class="flex h-9 w-9 items-center justify-center text-slate-400">…</li>
<li><a href="#" class="flex h-9 w-9 items-center justify-center rounded-lg text-slate-600 transition-colors hover:bg-slate-100">10</a></li>
<li><a href="#" class="flex h-9 items-center gap-1 rounded-lg px-3 text-slate-600 transition-colors hover:bg-slate-100">Next <span aria-hidden="true">›</span></a></li>
</ul>
</nav>Pagination with Results Count
Pagination
Showing 21 to 30 of 97 results
Joined button group (-space-x-px) — neighbouring page numbers hide on phones to save space.
<div class="flex w-full max-w-2xl flex-col items-center justify-between gap-3 sm:flex-row">
<p class="text-sm text-slate-600">Showing <span class="font-semibold text-slate-900">21</span> to <span class="font-semibold text-slate-900">30</span> of <span class="font-semibold text-slate-900">97</span> results</p>
<nav aria-label="Pagination">
<ul class="flex -space-x-px text-sm font-medium">
<li><a href="#" class="flex h-9 items-center rounded-l-lg border border-slate-300 bg-white px-3 text-slate-600 hover:bg-slate-50">Previous</a></li>
<li><a href="#" class="hidden h-9 w-10 items-center justify-center border border-slate-300 bg-white text-slate-600 hover:bg-slate-50 sm:flex">2</a></li>
<li><a href="#" aria-current="page" class="relative z-10 flex h-9 w-10 items-center justify-center border border-indigo-600 bg-indigo-600 text-white">3</a></li>
<li><a href="#" class="hidden h-9 w-10 items-center justify-center border border-slate-300 bg-white text-slate-600 hover:bg-slate-50 sm:flex">4</a></li>
<li><a href="#" class="flex h-9 items-center rounded-r-lg border border-slate-300 bg-white px-3 text-slate-600 hover:bg-slate-50">Next</a></li>
</ul>
</nav>
</div>Previous / Next Pagination
Pagination
On the first page, Previous is a plain span with aria-disabled rather than a dead link.
<nav aria-label="Pagination" class="flex w-full max-w-md items-center justify-between gap-3">
<span aria-disabled="true" class="inline-flex cursor-not-allowed items-center gap-2 rounded-xl border border-slate-200 px-4 py-2 text-sm font-semibold text-slate-400">
<span aria-hidden="true">←</span> Previous
</span>
<p class="text-sm text-slate-500">Page <span class="font-semibold text-slate-900">1</span> of 12</p>
<a href="#" class="inline-flex items-center gap-2 rounded-xl border border-slate-300 bg-white px-4 py-2 text-sm font-semibold text-slate-700 shadow-sm transition-colors hover:bg-slate-50">
Next <span aria-hidden="true">→</span>
</a>
</nav>Choosing a pagination pattern
Numbered pagination lets users jump to any page and see how far through a list they are; show the first and last page, the pages around the current one and an ellipsis for the rest. A results count (Showing 21 to 30 of 97) sets expectations in tables and admin screens. Simple previous/next buttons suit blogs, onboarding steps and any list where the page number matters less than moving on.
Keep each page link a real <a href> pointing to a crawlable URL such as ?page=3, so search engines can reach deeper pages and users can open them in new tabs. On phones, hide the neighbouring page numbers (hidden sm:flex) and keep Previous, the current page and Next.
Accessibility tips
Wrap the controls in <nav aria-label="Pagination"> and mark the current page with aria-current="page". Hide decorative arrows and ellipses from screen readers with aria-hidden="true", and render an unavailable Previous or Next as a non-link with aria-disabled="true" rather than a link that goes nowhere. Keep targets at least 36–44 px tall for touch.
Frequently Asked Questions
How do I mark the current page in pagination?↓
Add aria-current="page" to the current page's link and style it differently, for example with a filled background. Screen readers announce it as the current page.
Is pagination or infinite scroll better?↓
Pagination is better when users need to find their place again, reach the footer or compare items, and it is easier for search engines to crawl. Infinite scroll suits casual feeds. A Load more button is a reasonable middle ground.
Should pagination use links or buttons?↓
Use links when each page has its own URL, which is best for SEO and sharing. Use buttons only when the pages are loaded in place without changing the URL.
Last updated: