basecoat/docs/_includes/components/pagination.njk

<section id="pagination" class="w-full rounded-lg border scroll-mt-16">
  <header class="border-b px-4 py-3">
    <h2 class="text-sm font-medium">Pagination</h2>
  </header>
  <div class="p-4">
    <div class="inline-flex">
      <nav role="navigation" aria-label="pagination" class="mx-auto flex w-full justify-center">
        <ul class="flex flex-row items-center gap-1">
          <li>
            <a href="#" class="btn-ghost">{% lucide "chevron-left" %} Previous</a>
          </li>
          <li>
            <a href="#" class="btn-ghost size-9">1</a>
          </li>
          <li>
            <a href="#" class="btn-outline size-9">2</a>
          </li>
          <li>
            <a href="#" class="btn-ghost size-9">3</a>
          </li>
          <li>
            <a href="#" class="btn-icon-ghost">{% lucide "ellipsis" %}</a>
          </li>
          <li>
            <a href="#" class="btn-ghost">Next {% lucide "chevron-right" %}</a>
          </li>
        </ul>
      </nav>
    </div>
  </div>
</section>