Pagination

Enables users to navigate through a series of pages.

...

Showing 1 - 10

	<script lang="ts">
  import { Pagination } from "bits-ui";
  import CaretLeft from "phosphor-svelte/lib/CaretLeft";
  import CaretRight from "phosphor-svelte/lib/CaretRight";
</script>
 
<Pagination.Root count={100} perPage={10}>
  {#snippet children({ pages, range })}
    <div class="my-8 flex items-center">
      <Pagination.PrevButton
        class="hover:bg-dark-10 disabled:text-muted-foreground mr-[25px] inline-flex size-10 items-center justify-center rounded-[9px] bg-transparent active:scale-[0.98] disabled:cursor-not-allowed hover:disabled:bg-transparent"
      >
        <CaretLeft class="size-6" />
      </Pagination.PrevButton>
      <div class="flex items-center gap-2.5">
        {#each pages as page (page.key)}
          {#if page.type === "ellipsis"}
            <div
              class="text-foreground-alt select-none text-[15px] font-medium"
            >
              ...
            </div>
          {:else}
            <Pagination.Page
              {page}
              class="hover:bg-dark-10 data-selected:bg-foreground data-selected:text-background inline-flex size-10 select-none items-center justify-center rounded-[9px] bg-transparent text-[15px] font-medium active:scale-[0.98] disabled:cursor-not-allowed disabled:opacity-50 hover:disabled:bg-transparent"
            >
              {page.value}
            </Pagination.Page>
          {/if}
        {/each}
      </div>
      <Pagination.NextButton
        class="hover:bg-dark-10 disabled:text-muted-foreground ml-[29px] inline-flex size-10 items-center justify-center rounded-[9px] bg-transparent active:scale-[0.98] disabled:cursor-not-allowed hover:disabled:bg-transparent"
      >
        <CaretRight class="size-6" />
      </Pagination.NextButton>
    </div>
    <p class="text-muted-foreground text-center text-[13px]">
      Showing {range.start} - {range.end}
    </p>
  {/snippet}
</Pagination.Root>

Structure

	<script lang="ts">
  import { Pagination } from "bits-ui";
</script>
 
<Pagination.Root let:pages>
  <Pagination.PrevButton />
  {#each pages as page (page.key)}
    <Pagination.Page {page} />
  {/each}
  <Pagination.NextButton />
</Pagination.Root>

Managing Page State

This section covers how to manage the page state of the component.

Two-Way Binding

Use bind:page for simple, automatic state synchronization:

	<script lang="ts">
  import { Pagination } from "bits-ui";
  let myPage = $state(1);
</script>
 
<button onclick={() => (myPage = 2)}> Go to page 2 </button>
 
<Pagination.Root bind:page={myPage}>
  <!-- ...-->
</Pagination.Root>

Fully Controlled

Use a Function Binding for complete control over the state's reads and writes.

	<script lang="ts">
  import { Pagination } from "bits-ui";
  let myPage = $state(1);
 
  function getPage() {
    return myPage;
  }
 
  function setPage(newPage: number) {
    myPage = newPage;
  }
</script>
 
<Pagination.Root bind:page={getPage, setPage}>
  <!-- ... -->
</Pagination.Root>

Ellipsis

The pages snippet prop consists of two types of items: 'page' and 'ellipsis'. The 'page' type represents an actual page number, while the 'ellipsis' type represents a placeholder for rendering an ellipsis between pages.

API Reference

Pagination.Root

The root pagination component which contains all other pagination components.

Property Details
count
page
onPageChange
perPage
siblingCount
loop
orientation
ref
children
child

Pagination.Page

A button that triggers a page change.

Property Details
page
ref
children
child
Data Attribute Details
data-selected
data-pagination-page

Pagination.PrevButton

The previous button of the pagination.

Property Details
ref
children
child
Data Attribute Details
data-pagination-prev-button

Pagination.NextButton

The next button of the pagination.

Property Details
ref
children
child
Data Attribute Details
data-pagination-next-button
Previous Navigation Menu Next PIN Input