Pagination

Displays data in smaller chunks, or "pages," to make it more manageable.



Installation

npx shadcn-svelte@latest add https://retroui-svelte.netlify.app/r/pagination.json


Usage

		<script lang="ts">
 import * as Pagination from "$lib/components/ui/pagination/index.js";
</script>
 
<Pagination.Root count={100} perPage={10}>
 {#snippet children({ pages, currentPage })}
  <Pagination.Content>
   <Pagination.Item>
    <Pagination.PrevButton />
   </Pagination.Item>
   {#each pages as page (page.key)}
    {#if page.type === "ellipsis"}
     <Pagination.Item>
      <Pagination.Ellipsis />
     </Pagination.Item>
    {:else}
     <Pagination.Item>
      <Pagination.Link {page} isActive={currentPage === page.value}>
       {page.value}
      </Pagination.Link>
     </Pagination.Item>
    {/if}
   {/each}
   <Pagination.Item>
    <Pagination.NextButton />
   </Pagination.Item>
  </Pagination.Content>
 {/snippet}
</Pagination.Root>