Pagination

Facilitates navigation between pages.

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

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

...

Showing 0 - 10

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>

	<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>

Component API

Pagination.Root

The root pagination component which contains all other pagination components.

Property	Type	Description
`count` * Required	`number`	The total number of items. `Default: —— undefined`
`perPage`	`number`	The number of items per page. `Default: 1`
`siblingCount`	`number`	The number of page triggers to show on either side of the current page. `Default: 1`
`page`	`number`	The selected page. You can bind this to a variable to control the selected page from outside the component. `Default: —— undefined`
`onPageChange`	`function`	A function called when the selected page changes. `Default: —— undefined`
`asChild`	`boolean`	Whether to use render delegation with this component or not. `Default: false`
`el`	`HTMLDivElement`	The underlying DOM element being rendered. You can bind to this to programatically interact with the element. `Default: —— undefined`

Pagination.Page

A button that triggers a page change.

Property	Type	Description
`page`	`PageItem`	The page item this component represents. `Default: —— undefined`
`asChild`	`boolean`	Whether to use render delegation with this component or not. `Default: false`
`el`	`HTMLButtonElement`	The underlying DOM element being rendered. You can bind to this to programatically interact with the element. `Default: —— undefined`

Slot Property	Type	Description
`builder`	`object`	The builder attributes and actions to apply to the element if using the `asChild` prop with delegation.

Data Attribute	Value	Description
`data-selected`	`——`	Present on the current page element.
`data-pagination-page`	`——`	Present on the page trigger element.

Pagination.PrevButton

The previous button of the pagination.

Property	Type	Description
`asChild`	`boolean`	Whether to use render delegation with this component or not. `Default: false`
`el`	`HTMLButtonElement`	The underlying DOM element being rendered. You can bind to this to programatically interact with the element. `Default: —— undefined`

Slot Property	Type	Description
`builder`	`object`	The builder attributes and actions to apply to the element if using the `asChild` prop with delegation.

Data Attribute	Value	Description
`data-pagination-prev-button`	`——`	Present on the previous button element.

Pagination.NextButton

The next button of the pagination.

Property	Type	Description
`asChild`	`boolean`	Whether to use render delegation with this component or not. `Default: false`
`el`	`HTMLButtonElement`	The underlying DOM element being rendered. You can bind to this to programatically interact with the element. `Default: —— undefined`

Slot Property	Type	Description
`builder`	`object`	The builder attributes and actions to apply to the element if using the `asChild` prop with delegation.

Data Attribute	Value	Description
`data-pagination-next-button`	`——`	Present on the next button element.