Pagination

Facilitates navigation between pages.

	<script lang="ts">
  import { Pagination } from "$lib";
  import { CaretLeft, CaretRight, DotsThree } from "phosphor-svelte";
</script>
 
<Pagination.Root count={100} perPage={10} let:pages let:range>
  <p class="text-sm text-muted-foreground">
    Showing {range.start} - {range.end}
  </p>
  <div class="mt-4 flex items-center justify-center gap-1.5">
    <Pagination.PrevButton
      class="inline-flex items-center justify-center rounded-[9px] bg-transparent transition-all sq-10 hover:bg-foreground/5 active:scale-98 active:bg-dark-10 disabled:cursor-not-allowed disabled:opacity-50 hover:disabled:bg-transparent"
    >
      <CaretLeft class="sq-6" />
    </Pagination.PrevButton>
    {#each pages as page (page.key)}
      {#if page.type === "ellipsis"}
        <div class="self-end">
          <DotsThree class="sq-5" weight="bold" />
        </div>
      {:else}
        <Pagination.Page
          {page}
          class="inline-flex items-center justify-center rounded-[9px] border border-border bg-background shadow-mini sq-10 hover:bg-muted active:scale-98 active:bg-dark-10 data-[selected]:bg-foreground data-[selected]:text-background"
        >
          {page.value}
        </Pagination.Page>
      {/if}
    {/each}
    <Pagination.NextButton
      class="inline-flex items-center justify-center rounded-[9px] bg-transparent transition-all sq-10 hover:bg-foreground/5 active:scale-98 active:bg-dark-10 disabled:cursor-not-allowed hover:disabled:bg-transparent"
    >
      <CaretRight class="sq-6" />
    </Pagination.NextButton>
  </div>
</Pagination.Root>

	<script lang="ts">
  import { Pagination } from "$lib";
  import { CaretLeft, CaretRight, DotsThree } from "phosphor-svelte";
</script>
 
<Pagination.Root count={100} perPage={10} let:pages let:range>
  <p class="text-sm text-muted-foreground">
    Showing {range.start} - {range.end}
  </p>
  <div class="mt-4 flex items-center justify-center gap-1.5">
    <Pagination.PrevButton
      class="inline-flex items-center justify-center rounded-[9px] bg-transparent transition-all sq-10 hover:bg-foreground/5 active:scale-98 active:bg-dark-10 disabled:cursor-not-allowed disabled:opacity-50 hover:disabled:bg-transparent"
    >
      <CaretLeft class="sq-6" />
    </Pagination.PrevButton>
    {#each pages as page (page.key)}
      {#if page.type === "ellipsis"}
        <div class="self-end">
          <DotsThree class="sq-5" weight="bold" />
        </div>
      {:else}
        <Pagination.Page
          {page}
          class="inline-flex items-center justify-center rounded-[9px] border border-border bg-background shadow-mini sq-10 hover:bg-muted active:scale-98 active:bg-dark-10 data-[selected]:bg-foreground data-[selected]:text-background"
        >
          {page.value}
        </Pagination.Page>
      {/if}
    {/each}
    <Pagination.NextButton
      class="inline-flex items-center justify-center rounded-[9px] bg-transparent transition-all sq-10 hover:bg-foreground/5 active:scale-98 active:bg-dark-10 disabled:cursor-not-allowed hover:disabled:bg-transparent"
    >
      <CaretRight class="sq-6" />
    </Pagination.NextButton>
  </div>
</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.