Default
<div class="inline-flex">
<a href="#" class="px-2 py-1.5 inline-flex text-xs font-medium first:rounded-s-lg last:rounded-e-lg rounded-none border border-[var(--border)] bg-[var(--surface)] text-dark dark:text-white hover:bg-primary hover:text-white">
Pre
</a>
<a href="#" class="px-2 py-1.5 inline-flex text-xs font-medium first:rounded-s-lg last:rounded-e-lg rounded-none border border-[var(--border)] bg-[var(--surface)] text-dark dark:text-white hover:bg-primary hover:text-white">
01
</a>
<a href="#" class="px-2 py-1.5 inline-flex text-xs font-medium first:rounded-s-lg last:rounded-e-lg rounded-none border border-[var(--border)] bg-[var(--surface)] text-dark dark:text-white hover:bg-primary hover:text-white">
02
</a>
<a href="#" class="px-2 py-1.5 inline-flex text-xs font-medium first:rounded-s-lg last:rounded-e-lg rounded-none border border-[var(--border)] bg-[var(--surface)] text-dark dark:text-white hover:bg-primary hover:text-white">
03
</a>
<a href="#" class="px-2 py-1.5 inline-flex text-xs font-medium first:rounded-s-lg last:rounded-e-lg rounded-none border border-[var(--border)] bg-[var(--surface)] text-dark dark:text-white hover:bg-primary hover:text-white">
Next
</a>
</div>
Default With Icons
<div class="inline-flex">
<a href="#" class="px-2 py-1.5 inline-flex items-center justify-center text-xs font-semibold first:rounded-s-lg last:rounded-e-lg rounded-none border border-[var(--border)] bg-[var(--surface)] text-dark dark:text-white hover:bg-primary hover:text-white">
<i data-lucide="chevron-left" class="w-4 h-4"></i>
</a>
<a href="#" class="px-2 py-1.5 inline-flex text-xs font-medium first:rounded-s-lg last:rounded-e-lg rounded-none border border-[var(--border)] bg-[var(--surface)] text-dark dark:text-white hover:bg-primary hover:text-white">
01
</a>
<a href="#" class="px-2 py-1.5 inline-flex text-xs font-medium first:rounded-s-lg last:rounded-e-lg rounded-none border border-[var(--border)] bg-[var(--surface)] text-dark dark:text-white hover:bg-primary hover:text-white">
02
</a>
<a href="#" class="px-2 py-1.5 inline-flex text-xs font-medium first:rounded-s-lg last:rounded-e-lg rounded-none border border-[var(--border)] bg-[var(--surface)] text-dark dark:text-white hover:bg-primary hover:text-white">
03
</a>
<a href="#" class="px-2 py-1.5 inline-flex items-center justify-center text-xs font-medium first:rounded-s-lg last:rounded-e-lg rounded-none border border-[var(--border)] bg-[var(--surface)] text-dark dark:text-white hover:bg-primary hover:text-white">
<i data-lucide="chevron-right" class="w-4 h-4"></i>
</a>
</div>
Default with Active
<div class="inline-flex">
<a href="#" class="px-2 py-1.5 inline-flex text-xs font-medium first:rounded-s-lg last:rounded-e-lg rounded-none border border-[var(--border)] bg-[var(--surface)] text-dark dark:text-white hover:bg-primary hover:text-white">
Pre
</a>
<a href="#" class="px-2 py-1.5 inline-flex text-xs font-medium first:rounded-s-lg last:rounded-e-lg rounded-none border border-[var(--border)] bg-primary text-white hover:bg-primary hover:text-white">
01
</a>
<a href="#" class="px-2 py-1.5 inline-flex text-xs font-medium first:rounded-s-lg last:rounded-e-lg rounded-none border border-[var(--border)] bg-[var(--surface)] text-dark dark:text-white hover:bg-primary hover:text-white">
02
</a>
<a href="#" class="px-2 py-1.5 inline-flex text-xs font-medium first:rounded-s-lg last:rounded-e-lg rounded-none border border-[var(--border)] bg-[var(--surface)] text-dark dark:text-white hover:bg-primary hover:text-white">
03
</a>
<a href="#" class="px-2 py-1.5 inline-flex text-xs font-medium first:rounded-s-lg last:rounded-e-lg rounded-none border border-[var(--border)] bg-[var(--surface)] text-dark dark:text-white hover:bg-primary hover:text-white">
Next
</a>
</div>
Default with Active Ghost
<div class="inline-flex">
<a href="#" class="px-2 py-1.5 inline-flex text-xs font-medium first:rounded-s-lg last:rounded-e-lg rounded-none border border-[var(--border)] hover:border-primary bg-[var(--surface)] text-dark dark:text-white hover:bg-primary text-white hover:text-primary">
Pre
</a>
<a href="#" class="px-2 py-1.5 inline-flex text-xs font-medium first:rounded-s-lg last:rounded-e-lg rounded-none border border-primary hover:border-primary bg-primary text-white hover:bg-primary text-white hover:text-primary">
01
</a>
<a href="#" class="px-2 py-1.5 inline-flex text-xs font-medium first:rounded-s-lg last:rounded-e-lg rounded-none border border-[var(--border)] hover:border-primary bg-[var(--surface)] text-dark dark:text-white hover:bg-primary text-white hover:text-primary">
02
</a>
<a href="#" class="px-2 py-1.5 inline-flex text-xs font-medium first:rounded-s-lg last:rounded-e-lg rounded-none border border-[var(--border)] hover:border-primary bg-[var(--surface)] text-dark dark:text-white hover:bg-primary text-white hover:text-primary">
03
</a>
<a href="#" class="px-2 py-1.5 inline-flex text-xs font-medium first:rounded-s-lg last:rounded-e-lg rounded-none border border-[var(--border)] hover:border-primary bg-[var(--surface)] text-dark dark:text-white hover:bg-primary text-white hover:text-primary">
Next
</a>
</div>
Left Align
<div class="inline-flex">
<a href="#" class="px-2 py-1.5 inline-flex items-center justify-center text-xs font-semibold first:rounded-s-lg last:rounded-e-lg rounded-none border border-[var(--border)] bg-[var(--surface)] text-dark dark:text-white hover:bg-primary hover:text-white">
<i data-lucide="chevron-left" class="w-4 h-4"></i>
</a>
<a href="#" class="px-2 py-1.5 inline-flex text-xs font-medium first:rounded-s-lg last:rounded-e-lg rounded-none border border-[var(--border)] bg-[var(--surface)] text-dark dark:text-white hover:bg-primary hover:text-white">
01
</a>
<a href="#" class="px-2 py-1.5 inline-flex text-xs font-medium first:rounded-s-lg last:rounded-e-lg rounded-none border border-[var(--border)] bg-[var(--surface)] text-dark dark:text-white hover:bg-primary hover:text-white">
02
</a>
<a href="#" class="px-2 py-1.5 inline-flex text-xs font-medium first:rounded-s-lg last:rounded-e-lg rounded-none border border-[var(--border)] bg-[var(--surface)] text-dark dark:text-white hover:bg-primary hover:text-white">
03
</a>
<a href="#" class="px-2 py-1.5 inline-flex items-center justify-center text-xs font-medium first:rounded-s-lg last:rounded-e-lg rounded-none border border-[var(--border)] bg-[var(--surface)] text-dark dark:text-white hover:bg-primary hover:text-white">
<i data-lucide="chevron-right" class="w-4 h-4"></i>
</a>
</div>
Centre Align
<div class="flex justify-center items-center">
<div class="inline-flex">
<a href="#" class="px-2 py-1.5 inline-flex items-center justify-center text-xs font-semibold first:rounded-s-lg last:rounded-e-lg rounded-none border border-[var(--border)] bg-[var(--surface)] text-dark dark:text-white hover:bg-primary hover:text-white">
<i data-lucide="chevron-left" class="w-4 h-4"></i>
</a>
<a href="#" class="px-2 py-1.5 inline-flex text-xs font-medium first:rounded-s-lg last:rounded-e-lg rounded-none border border-[var(--border)] bg-[var(--surface)] text-dark dark:text-white hover:bg-primary hover:text-white">
01
</a>
<a href="#" class="px-2 py-1.5 inline-flex text-xs font-medium first:rounded-s-lg last:rounded-e-lg rounded-none border border-[var(--border)] bg-[var(--surface)] text-dark dark:text-white hover:bg-primary hover:text-white">
02
</a>
<a href="#" class="px-2 py-1.5 inline-flex text-xs font-medium first:rounded-s-lg last:rounded-e-lg rounded-none border border-[var(--border)] bg-[var(--surface)] text-dark dark:text-white hover:bg-primary hover:text-white">
03
</a>
<a href="#" class="px-2 py-1.5 inline-flex items-center justify-center text-xs font-medium first:rounded-s-lg last:rounded-e-lg rounded-none border border-[var(--border)] bg-[var(--surface)] text-dark dark:text-white hover:bg-primary hover:text-white">
<i data-lucide="chevron-right" class="w-4 h-4"></i>
</a>
</div>
</div>
Right Align
<div class="flex justify-end items-end">
<div class="inline-flex">
<a href="#" class="px-2 py-1.5 inline-flex items-center justify-center text-xs font-semibold first:rounded-s-lg last:rounded-e-lg rounded-none border border-[var(--border)] bg-[var(--surface)] text-dark dark:text-white hover:bg-primary hover:text-white">
02
</a>
<a href="#" class="px-2 py-1.5 inline-flex text-xs font-medium first:rounded-s-lg last:rounded-e-lg rounded-none border border-[var(--border)] bg-[var(--surface)] text-dark dark:text-white hover:bg-primary hover:text-white">
03
</a>
<a href="#" class="px-2 py-1.5 inline-flex items-center justify-center text-xs font-medium first:rounded-s-lg last:rounded-e-lg rounded-none border border-[var(--border)] bg-[var(--surface)] text-dark dark:text-white hover:bg-primary hover:text-white">
<i data-lucide="chevron-right" class="w-4 h-4"></i>
</a>
</div>
</div>
Custom Pagination
<div class="inline-flex gap-1">
<a href="#" class="px-2 py-1.5 inline-flex text-xs font-medium rounded-lg border border-[var(--border)] bg-[var(--surface)] text-dark dark:text-white hover:bg-primary hover:text-white">
<i data-lucide="chevron-left" class="w-4 h-4 me-1"></i> Pre
</a>
<a href="#" class="px-2 py-1.5 inline-flex text-xs font-medium rounded-lg border border-[var(--border)] bg-primary text-white hover:bg-primary hover:text-white">
01
</a>
<a href="#" class="px-2 py-1.5 inline-flex text-xs font-medium rounded-lg border border-[var(--border)] bg-[var(--surface)] text-dark dark:text-white hover:bg-primary hover:text-white">
02
</a>
<a href="#" class="px-2 py-1.5 inline-flex text-xs font-medium rounded-lg border border-[var(--border)] bg-[var(--surface)] text-dark dark:text-white hover:bg-primary hover:text-white">
03
</a>
<a href="#" class="px-2 py-1.5 inline-flex text-xs font-medium rounded-lg border border-[var(--border)] bg-[var(--surface)] text-dark dark:text-white hover:bg-primary hover:text-white">
...
</a>
<a href="#" class="px-2 py-1.5 inline-flex text-xs font-medium rounded-lg border border-[var(--border)] bg-[var(--surface)] text-dark dark:text-white hover:bg-primary hover:text-white">
10
</a>
<a href="#" class="px-2 py-1.5 inline-flex text-xs font-medium rounded-lg border border-[var(--border)] bg-[var(--surface)] text-dark dark:text-white hover:bg-primary hover:text-white">
Next <i data-lucide="chevron-right" class="w-4 h-4 ms-1"></i>
</a>
</div>
Soft Pagination
<div class="inline-flex gap-1">
<a href="#" class="px-2 py-1.5 inline-flex text-xs font-medium rounded-lg border border-[var(--border)] hover:border-primary bg-[var(--surface)] text-dark dark:text-white hover:bg-primary text-white hover:text-primary">
<i data-lucide="chevron-left" class="w-4 h-4"></i>
</a>
<a href="#" class="px-2 py-1.5 inline-flex text-xs font-medium rounded-lg border border-primary hover:border-primary bg-primary text-white hover:bg-primary text-white hover:text-primary">
01
</a>
<a href="#" class="px-2 py-1.5 inline-flex text-xs font-medium rounded-lg border border-[var(--border)] hover:border-primary bg-[var(--surface)] text-dark dark:text-white hover:bg-primary text-white hover:text-primary">
02
</a>
<a href="#" class="px-2 py-1.5 inline-flex text-xs font-medium rounded-lg border border-[var(--border)] hover:border-primary bg-[var(--surface)] text-dark dark:text-white hover:bg-primary text-white hover:text-primary">
03
</a>
<a href="#" class="px-2 py-1.5 inline-flex text-xs font-medium rounded-lg border border-[var(--border)] hover:border-primary bg-[var(--surface)] text-dark dark:text-white hover:bg-primary text-white hover:text-primary">
...
</a>
<a href="#" class="px-2 py-1.5 inline-flex text-xs font-medium rounded-lg border border-[var(--border)] hover:border-primary bg-[var(--surface)] text-dark dark:text-white hover:bg-primary text-white hover:text-primary">
10
</a>
<a href="#" class="px-2 py-1.5 inline-flex text-xs font-medium rounded-lg border border-[var(--border)] hover:border-primary bg-[var(--surface)] text-dark dark:text-white hover:bg-primary text-white hover:text-primary">
<i data-lucide="chevron-right" class="w-4 h-4"></i>
</a>
</div>
Pagination 1
<div class="inline-flex gap-1">
<a href="#" class="px-2 py-1.5 inline-flex text-xs font-medium rounded-full border border-[var(--border)] bg-[var(--surface)] text-dark dark:text-white hover:bg-primary hover:text-white">
<i data-lucide="chevron-left" class="w-4 h-4 me-1"></i> Pre
</a>
<a href="#" class="w-7.5 h-7.5 items-center justify-center inline-flex text-xs font-medium rounded-full border border-[var(--border)] bg-primary text-white hover:bg-primary hover:text-white">
01
</a>
<a href="#" class="w-7.5 h-7.5 items-center justify-center inline-flex text-xs font-medium rounded-full border border-[var(--border)] bg-[var(--surface)] text-dark dark:text-white hover:bg-primary hover:text-white">
02
</a>
<a href="#" class="w-7.5 h-7.5 items-center justify-center inline-flex text-xs font-medium rounded-full border border-[var(--border)] bg-[var(--surface)] text-dark dark:text-white hover:bg-primary hover:text-white">
03
</a>
<a href="#" class="w-7.5 h-7.5 items-center justify-center inline-flex text-xs font-medium rounded-full border border-[var(--border)] bg-[var(--surface)] text-dark dark:text-white hover:bg-primary hover:text-white">
...
</a>
<a href="#" class="w-7.5 h-7.5 items-center justify-center inline-flex text-xs font-medium rounded-full border border-[var(--border)] bg-[var(--surface)] text-dark dark:text-white hover:bg-primary hover:text-white">
10
</a>
<a href="#" class="px-2 py-1.5 inline-flex text-xs font-medium rounded-full border border-[var(--border)] bg-[var(--surface)] text-dark dark:text-white hover:bg-primary hover:text-white">
Next <i data-lucide="chevron-right" class="w-4 h-4 ms-1"></i>
</a>
</div>
Pagination 2
<div class="inline-flex gap-1">
<a href="#" class="w-7.5 h-7.5 inline-flex items-center justify-center text-xs font-medium rounded-full border border-[var(--border)] hover:border-primary bg-[var(--surface)] text-dark dark:text-white hover:bg-primary text-white hover:text-primary">
<i data-lucide="chevron-left" class="w-4 h-4"></i>
</a>
<a href="#" class="w-7.5 h-7.5 inline-flex items-center justify-center text-xs font-medium rounded-full border border-primary hover:border-primary bg-primary text-white hover:bg-primary text-white hover:text-primary">
01
</a>
<a href="#" class="w-7.5 h-7.5 inline-flex items-center justify-center text-xs font-medium rounded-full border border-[var(--border)] hover:border-primary bg-[var(--surface)] text-dark dark:text-white hover:bg-primary text-white hover:text-primary">
02
</a>
<a href="#" class="w-7.5 h-7.5 inline-flex items-center justify-center text-xs font-medium rounded-full border border-[var(--border)] hover:border-primary bg-[var(--surface)] text-dark dark:text-white hover:bg-primary text-white hover:text-primary">
03
</a>
<a href="#" class="w-7.5 h-7.5 inline-flex items-center justify-center text-xs font-medium rounded-full border border-[var(--border)] hover:border-primary bg-[var(--surface)] text-dark dark:text-white hover:bg-primary text-white hover:text-primary">
...
</a>
<a href="#" class="w-7.5 h-7.5 inline-flex items-center justify-center text-xs font-medium rounded-full border border-[var(--border)] hover:border-primary bg-[var(--surface)] text-dark dark:text-white hover:bg-primary text-white hover:text-primary">
10
</a>
<a href="#" class="w-7.5 h-7.5 inline-flex items-center justify-center text-xs font-medium rounded-full border border-[var(--border)] hover:border-primary bg-[var(--surface)] text-dark dark:text-white hover:bg-primary text-white hover:text-primary">
<i data-lucide="chevron-right" class="w-4 h-4"></i>
</a>
</div>
Pagination 3
<div class="inline-flex">
<a href="#" class="px-2 py-1.5 inline-flex text-xs font-medium first:rounded-s-lg last:rounded-e-lg rounded-none border border-[var(--border)] hover:border-b-primary bg-[var(--surface)] text-dark dark:text-white hover:bg-primary text-white hover:text-primary">
Pre
</a>
<a href="#" class="px-2 py-1.5 inline-flex text-xs font-medium first:rounded-s-lg last:rounded-e-lg rounded-none border border-[var(--border)] border-b-primary hover:border-b-primary bg-primary text-white hover:bg-primary text-white hover:text-primary">
01
</a>
<a href="#" class="px-2 py-1.5 inline-flex text-xs font-medium first:rounded-s-lg last:rounded-e-lg rounded-none border border-[var(--border)] hover:border-b-primary bg-[var(--surface)] text-dark dark:text-white hover:bg-primary text-white hover:text-primary">
02
</a>
<a href="#" class="px-2 py-1.5 inline-flex text-xs font-medium first:rounded-s-lg last:rounded-e-lg rounded-none border border-[var(--border)] hover:border-b-primary bg-[var(--surface)] text-dark dark:text-white hover:bg-primary text-white hover:text-primary">
03
</a>
<a href="#" class="px-2 py-1.5 inline-flex text-xs font-medium first:rounded-s-lg last:rounded-e-lg rounded-none border border-[var(--border)] hover:border-b-primary bg-[var(--surface)] text-dark dark:text-white hover:bg-primary text-white hover:text-primary">
Next
</a>
</div>
Pagination 4
<div class="inline-flex gap-1">
<div>
<a href="#" class="px-2 py-1.5 inline-flex text-xs font-medium rounded-full border border-[var(--border)] hover:border-primary bg-[var(--surface)] text-dark dark:text-white hover:bg-primary text-white hover:text-primary">
<i data-lucide="chevrons-left" class="w-4 h-4"></i>
</a>
<a href="#" class="px-2 py-1.5 inline-flex text-xs font-medium rounded-full border border-[var(--border)] hover:border-primary bg-[var(--surface)] text-dark dark:text-white hover:bg-primary text-white hover:text-primary">
<i data-lucide="chevron-left" class="w-4 h-4"></i>
</a>
</div>
<div class="flex">
<a href="#" class="px-2 py-1.5 inline-flex text-xs font-medium first:rounded-s-full last:rounded-e-full rounded-none border border-e-0 border-[var(--border)] bg-[var(--surface)] text-dark dark:text-white hover:text-primary">
01
</a>
<a href="#" class="px-2 py-1.5 inline-flex text-xs font-medium first:rounded-s-full last:rounded-e-full rounded-none border border-e-0 border-s-0 border-[var(--border)] bg-[var(--surface)] c-gold hover:text-primary">
02
</a>
<a href="#" class="px-2 py-1.5 inline-flex text-xs font-medium first:rounded-s-full last:rounded-e-full rounded-none border border-e-0 border-s-0 border-[var(--border)] bg-[var(--surface)] text-dark dark:text-white hover:text-primary">
03
</a>
<a href="#" class="px-2 py-1.5 inline-flex text-xs font-medium first:rounded-s-full last:rounded-e-full rounded-none border border-s-0 border-[var(--border)] bg-[var(--surface)] text-dark dark:text-white hover:text-primary">
04
</a>
</div>
<div>
<a href="#" class="px-2 py-1.5 inline-flex text-xs font-medium rounded-full border border-[var(--border)] hover:border-primary bg-[var(--surface)] text-dark dark:text-white hover:bg-primary text-white hover:text-primary">
<i data-lucide="chevron-right" class="w-4 h-4"></i>
</a>
<a href="#" class="px-2 py-1.5 inline-flex text-xs font-medium rounded-full border border-[var(--border)] hover:border-primary bg-[var(--surface)] text-dark dark:text-white hover:bg-primary text-white hover:text-primary">
<i data-lucide="chevrons-right" class="w-4 h-4"></i>
</a>
</div>
</div>
