For AI agents: the complete documentation index is available at https://a3s-lab.github.io/UI/v0.1.0/en/llms.txt, the full documentation bundle is available at https://a3s-lab.github.io/UI/v0.1.0/en/llms-full.txt, and this page is available as Markdown at https://a3s-lab.github.io/UI/v0.1.0/en/components/pagination.md.
A3S UI
  • English
  • v0.1.0

      • Pagination

      Live previewHTML · CSS · JavaScript

      Usage

      Include CSS

      Import Tailwind and one full A3S UI style bundle.

      @import "tailwindcss";
@import "@a3s-lab/ui/a3s.css";

      Or import only the base CSS, Pagination component CSS, and one style pack.

      @import "tailwindcss";
@import "@a3s-lab/ui/base.css";
@import "@a3s-lab/ui/components/button.css";
@import "@a3s-lab/ui/styles/a3s.css";

      Pagination uses Button component CSS for its links and controls.

      Using CDN or bundler imports? See the Installation page.

      Add your pagination HTML

      A pagination is fairly simple to implement with Tailwind using the A3S UI button classes:

      <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" data-variant="ghost">
        <svg class="lucide lucide-chevron-left" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m15 18-6-6 6-6" /></svg>
        Previous
      </a>
    </li>
    <li><a href="#" class="btn" data-variant="ghost" data-size="icon">1</a></li>
    <li><a href="#" class="btn" data-variant="outline" data-size="icon">2</a></li>
    <li><a href="#" class="btn" data-variant="ghost" data-size="icon">3</a></li>
    <li><div class="size-9 flex items-center justify-center"><svg class="size-4 shrink-0 lucide lucide-ellipsis" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="1" /><circle cx="19" cy="12" r="1" /><circle cx="5" cy="12" r="1" /></svg></div></li>
    <li>
      <a href="#" class="btn" data-variant="ghost">
        Next
        <svg class="lucide lucide-chevron-right" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m9 18 6-6-6-6" /></svg>
      </a>
    </li>
  </ul>
</nav>

      Examples

      RTL

      Pagination uses document direction and logical spacing. Set dir="rtl" on the pagination root or a parent.

      Live previewHTML · CSS · JavaScript