Pagination

<nav class="pagination" aria-label="Pagination">
  <button class="pagination-btn pagination-prev" aria-label="Previous page">
    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M15.75 19.5 8.25 12l7.5-7.5" /></svg>
  </button>
  <button class="pagination-btn">1</button>
  <button class="pagination-btn pagination-active">2</button>
  <button class="pagination-btn">3</button>
  <span class="pagination-ellipsis">...</span>
  <button class="pagination-btn">10</button>
  <button class="pagination-btn pagination-next" aria-label="Next page">
    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="m8.25 4.5 7.5 7.5-7.5 7.5" /></svg>
  </button>
</nav>

Requires: ux.min.css

<nav class="flex items-center justify-center gap-1 flex-wrap" aria-label="Pagination">
  <button class="inline-flex items-center justify-center size-9 rounded-lg text-sm font-medium cursor-pointer bg-transparent border-none hover:bg-base-200" aria-label="Previous page">
    <svg class="size-4.5" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M15.75 19.5 8.25 12l7.5-7.5" /></svg>
  </button>
  <button class="inline-flex items-center justify-center min-w-9 h-9 px-2 rounded-lg text-sm font-medium cursor-pointer bg-transparent border-none hover:bg-base-200">1</button>
  <button class="inline-flex items-center justify-center min-w-9 h-9 px-2 rounded-lg text-sm font-semibold cursor-pointer bg-primary text-primary-content border-none">2</button>
  <button class="inline-flex items-center justify-center min-w-9 h-9 px-2 rounded-lg text-sm font-medium cursor-pointer bg-transparent border-none hover:bg-base-200">3</button>
  <span class="inline-flex items-center justify-center min-w-9 h-9 text-sm text-base-content/40">...</span>
  <button class="inline-flex items-center justify-center min-w-9 h-9 px-2 rounded-lg text-sm font-medium cursor-pointer bg-transparent border-none hover:bg-base-200">10</button>
  <button class="inline-flex items-center justify-center size-9 rounded-lg text-sm font-medium cursor-pointer bg-transparent border-none hover:bg-base-200" aria-label="Next page">
    <svg class="size-4.5" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="m8.25 4.5 7.5 7.5-7.5 7.5" /></svg>
  </button>
</nav>

Requires: tw.min.css

// Update active page with JavaScript:
document.querySelectorAll('.pagination-btn:not(.pagination-prev):not(.pagination-next)').forEach(btn => {
  btn.addEventListener('click', () => {
    document.querySelector('.pagination-active')?.classList.remove('pagination-active');
    btn.classList.add('pagination-active');
  });
});

<nav class="pagination pagination-sm" aria-label="Small pagination">
  <button class="pagination-btn pagination-prev"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M15.75 19.5 8.25 12l7.5-7.5" /></svg></button>
  <button class="pagination-btn pagination-active">1</button>
  <button class="pagination-btn">2</button>
  <button class="pagination-btn">3</button>
  <button class="pagination-btn pagination-next"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="m8.25 4.5 7.5 7.5-7.5 7.5" /></svg></button>
</nav>

<nav class="pagination pagination-lg" aria-label="Large pagination">
  <button class="pagination-btn pagination-prev"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M15.75 19.5 8.25 12l7.5-7.5" /></svg></button>
  <button class="pagination-btn pagination-active">1</button>
  <button class="pagination-btn">2</button>
  <button class="pagination-btn">3</button>
  <button class="pagination-btn pagination-next"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="m8.25 4.5 7.5 7.5-7.5 7.5" /></svg></button>
</nav>

Requires: ux.min.css

<!-- Small -->
<nav class="flex items-center justify-center gap-1 flex-wrap" aria-label="Small pagination">
  <button class="inline-flex items-center justify-center size-7 rounded-lg text-xs font-medium cursor-pointer bg-transparent border-none hover:bg-base-200" aria-label="Previous page">
    <svg class="size-3.5" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M15.75 19.5 8.25 12l7.5-7.5" /></svg>
  </button>
  <button class="inline-flex items-center justify-center min-w-7 h-7 px-1.5 rounded-lg text-xs font-semibold cursor-pointer bg-primary text-primary-content border-none">1</button>
  <button class="inline-flex items-center justify-center min-w-7 h-7 px-1.5 rounded-lg text-xs font-medium cursor-pointer bg-transparent border-none hover:bg-base-200">2</button>
  <button class="inline-flex items-center justify-center min-w-7 h-7 px-1.5 rounded-lg text-xs font-medium cursor-pointer bg-transparent border-none hover:bg-base-200">3</button>
  <button class="inline-flex items-center justify-center size-7 rounded-lg text-xs font-medium cursor-pointer bg-transparent border-none hover:bg-base-200" aria-label="Next page">
    <svg class="size-3.5" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="m8.25 4.5 7.5 7.5-7.5 7.5" /></svg>
  </button>
</nav>

<!-- Large -->
<nav class="flex items-center justify-center gap-1 flex-wrap mt-4" aria-label="Large pagination">
  <button class="inline-flex items-center justify-center size-11 rounded-lg text-base font-medium cursor-pointer bg-transparent border-none hover:bg-base-200" aria-label="Previous page">
    <svg class="size-5" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M15.75 19.5 8.25 12l7.5-7.5" /></svg>
  </button>
  <button class="inline-flex items-center justify-center min-w-11 h-11 px-3 rounded-lg text-base font-semibold cursor-pointer bg-primary text-primary-content border-none">1</button>
  <button class="inline-flex items-center justify-center min-w-11 h-11 px-3 rounded-lg text-base font-medium cursor-pointer bg-transparent border-none hover:bg-base-200">2</button>
  <button class="inline-flex items-center justify-center min-w-11 h-11 px-3 rounded-lg text-base font-medium cursor-pointer bg-transparent border-none hover:bg-base-200">3</button>
  <button class="inline-flex items-center justify-center size-11 rounded-lg text-base font-medium cursor-pointer bg-transparent border-none hover:bg-base-200" aria-label="Next page">
    <svg class="size-5" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="m8.25 4.5 7.5 7.5-7.5 7.5" /></svg>
  </button>
</nav>

Requires: tw.min.css

// No JavaScript required - pure CSS component

<nav class="pagination pagination-bordered" aria-label="Bordered pagination">
  <button class="pagination-btn pagination-prev"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M15.75 19.5 8.25 12l7.5-7.5" /></svg></button>
  <button class="pagination-btn">1</button>
  <button class="pagination-btn pagination-active">2</button>
  <button class="pagination-btn">3</button>
  <button class="pagination-btn pagination-next"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="m8.25 4.5 7.5 7.5-7.5 7.5" /></svg></button>
</nav>

Requires: ux.min.css

<nav class="flex items-center justify-center gap-1">
  <button class="inline-flex items-center justify-center size-9 rounded-lg text-sm font-medium cursor-pointer bg-transparent border border-base-300 hover:bg-base-200"><svg class="size-4.5" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M15.75 19.5 8.25 12l7.5-7.5" /></svg></button>
  <button class="inline-flex items-center justify-center min-w-9 h-9 px-2 rounded-lg text-sm font-medium cursor-pointer bg-transparent border border-base-300 hover:bg-base-200">1</button>
  <button class="inline-flex items-center justify-center min-w-9 h-9 px-2 rounded-lg text-sm font-semibold cursor-pointer bg-primary text-primary-content border border-primary">2</button>
  <button class="inline-flex items-center justify-center min-w-9 h-9 px-2 rounded-lg text-sm font-medium cursor-pointer bg-transparent border border-base-300 hover:bg-base-200">3</button>
  <button class="inline-flex items-center justify-center size-9 rounded-lg text-sm font-medium cursor-pointer bg-transparent border border-base-300 hover:bg-base-200"><svg class="size-4.5" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="m8.25 4.5 7.5 7.5-7.5 7.5" /></svg></button>
</nav>

Requires: tw.min.css

// No JavaScript required - pure CSS component