Pagination Base

Fetch pattern JSON: curl https://webspire.de/patterns/pagination/base.json

base.html

<nav aria-label="Pagination" class="ws-pagination flex items-center justify-center gap-1">
  <a href="#" aria-label="Previous page" class="inline-flex h-10 items-center justify-center rounded-lg border border-[var(--ws-pagination-border)] px-3 text-sm font-medium text-[var(--ws-pagination-text)] transition hover:bg-[var(--ws-pagination-hover-bg)]">Previous</a>
  <a href="#" aria-label="Page 1" class="inline-flex h-10 w-10 items-center justify-center rounded-lg text-sm font-medium text-[var(--ws-pagination-text)] transition hover:bg-[var(--ws-pagination-hover-bg)]">1</a>
  <a href="#" aria-label="Page 2" class="inline-flex h-10 w-10 items-center justify-center rounded-lg text-sm font-medium text-[var(--ws-pagination-text)] transition hover:bg-[var(--ws-pagination-hover-bg)]">2</a>
  <a href="#" aria-current="page" aria-label="Page 3, current page" class="inline-flex h-10 w-10 items-center justify-center rounded-lg bg-[var(--ws-pagination-active-bg)] text-sm font-medium text-[var(--ws-pagination-active-text)]">3</a>
  <a href="#" aria-label="Page 4" class="inline-flex h-10 w-10 items-center justify-center rounded-lg text-sm font-medium text-[var(--ws-pagination-text)] transition hover:bg-[var(--ws-pagination-hover-bg)]">4</a>
  <a href="#" aria-label="Page 5" class="inline-flex h-10 w-10 items-center justify-center rounded-lg text-sm font-medium text-[var(--ws-pagination-text)] transition hover:bg-[var(--ws-pagination-hover-bg)]">5</a>
  <span class="inline-flex h-10 w-10 items-center justify-center text-sm text-[var(--ws-pagination-text)]">&hellip;</span>
  <a href="#" aria-label="Page 10" class="inline-flex h-10 w-10 items-center justify-center rounded-lg text-sm font-medium text-[var(--ws-pagination-text)] transition hover:bg-[var(--ws-pagination-hover-bg)]">10</a>
  <a href="#" aria-label="Next page" class="inline-flex h-10 items-center justify-center rounded-lg border border-[var(--ws-pagination-border)] px-3 text-sm font-medium text-[var(--ws-pagination-text)] transition hover:bg-[var(--ws-pagination-hover-bg)]">Next</a>
</nav>

Details

Family

pagination

Tier

base

Kind

component

Responsive Dark Mode Tailwind Only SSR Safe Copy & Paste

Stable Published

paginationpagingnavigationpage-numbers

Slots

Name	Required	Description
pages	Yes	Page number links with current page indicator.
previous	Yes	Previous page navigation button.
next	Yes	Next page navigation button.

Standard numbered pagination with previous/next buttons, ellipsis for large page ranges, and highlighted current page. Ideal for search results, data tables, and content listings.