devsnips
Search docs, APIs, guides…

Component

Pagination

Page navigation component with multiple styles. Includes standard, compact, and first/last variants.

  • Component
  • Tailwind
  • HTML
  • MIT

What it does

Capabilities

  • Standard numbered pagination
  • Previous/Next arrows
  • Ellipsis for large page counts
  • Compact variant with results count
  • First/Last page buttons

Preview

Live component

Interactive preview
Open preview
9:41 100%
devsnips.site/library/tailwind/components/navigation/pagination/
fluid · no fixed width 100%
No dependencies Production-ready

Install

Add to your project

terminal
npx devsnips add Tailwind/Components/Navigation/pagination
registry path: Tailwind/Components/Navigation/pagination

Source

Implementation

code.html 
<nav class="flex items-center justify-center gap-2" aria-label="Pagination">
  <a href="#" class="p-2 text-gray-500 hover:text-gray-700 hover:bg-gray-100 rounded-lg transition-colors" aria-label="Previous">
    <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"/>
    </svg>
  </a>
  <a href="#" class="w-10 h-10 flex items-center justify-center text-gray-600 hover:bg-gray-100 rounded-lg transition-colors">1</a>
  <a href="#" class="w-10 h-10 flex items-center justify-center text-gray-600 hover:bg-gray-100 rounded-lg transition-colors bg-gray-100">2</a>
  <a href="#" class="w-10 h-10 flex items-center justify-center text-gray-600 hover:bg-gray-100 rounded-lg transition-colors">3</a>
  <span class="w-10 h-10 flex items-center justify-center text-gray-400">...</span>
  <a href="#" class="w-10 h-10 flex items-center justify-center text-gray-600 hover:bg-gray-100 rounded-lg transition-colors">8</a>
  <a href="#" class="w-10 h-10 flex items-center justify-center text-gray-600 hover:bg-gray-100 rounded-lg transition-colors">9</a>
  <a href="#" class="w-10 h-10 flex items-center justify-center text-gray-600 hover:bg-gray-100 rounded-lg transition-colors">10</a>
  <a href="#" class="p-2 text-gray-500 hover:text-gray-700 hover:bg-gray-100 rounded-lg transition-colors" aria-label="Next">
    <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"/>
    </svg>
  </a>
</nav>
19 lines UTF-8 · LF · Spaces: 2
DevSnips AI ready Claude · Cursor · Windsurf

Agent skill & Model Context Protocol

Pass this component straight into your AI workflow. DevSnips exposes each resource as a structured, addressable registry entry, so your agent installs the real files instead of approximating them.

devsnips://components/navigation/pagination
Prompt instruction 
I want to use this DevSnips resource in production:

Page:
https://devsnips.site/library/tailwind/components/navigation/pagination/

Install: npx devsnips add
Tailwind/Components/Navigation/pagination

This is the Pagination — Page navigation component with multiple styles. Includes standard, compact, and first/last variants.

Use this DevSnips resource as the starting point for my project.
Adapt it to my project's stack and conventions, fix any issues,
and make it production-ready while preserving its intended design
and behavior.

Paste into ChatGPT, Claude or your agent — it already carries the page URL and the exact install path.

Resource URI
devsnips://components/navigation/pagination