Kumo Svelte
kumo-svelte

Pagination

A page navigation component for navigating through paginated content.

Showing 1-10 of 100
<script lang="ts">
  import * as Pagination from "kumo-svelte/components/pagination";
  let page = $state(1);
</script>

<Pagination.Root bind:page perPage={10} totalCount={100} />

Import

import * as Pagination from "kumo-svelte/components/pagination";

Usage

<script lang="ts">
  import * as Pagination from "kumo-svelte/components/pagination";
  let page = $state(1);
</script>

<Pagination.Root bind:page perPage={10} totalCount={100} />

Examples

Full Controls (Default)

The default pagination includes first, previous, page input, next, and last buttons.

Showing 1-10 of 100
<script lang="ts">
  import * as Pagination from "kumo-svelte/components/pagination";
  let page = $state(1);
</script>

<Pagination.Root bind:page perPage={10} totalCount={100} controls="full" />

Simple Controls

Use controls="simple" for a minimal pagination with only previous and next buttons.

Showing 1-10 of 100
<script lang="ts">
  import * as Pagination from "kumo-svelte/components/pagination";
  let page = $state(1);
</script>

<Pagination.Root bind:page perPage={10} totalCount={100} controls="simple" />

Mid-Page State

Pagination in the middle of a dataset with all navigation enabled.

Showing 41-50 of 100
<script lang="ts">
  import * as Pagination from "kumo-svelte/components/pagination";
  let page = $state(5);
</script>

<Pagination.Root bind:page perPage={10} totalCount={100} />

Large Dataset

Pagination handles large datasets with many pages.

Showing 1-25 of 1250
<script lang="ts">
  import * as Pagination from "kumo-svelte/components/pagination";
  let page = $state(1);
</script>

<Pagination.Root bind:page perPage={25} totalCount={1250} />

Custom Text

You can set custom pagination text with a snippet.

Page 1 - showing 25 per page
<script lang="ts">
  import * as Pagination from "kumo-svelte/components/pagination";
  let page = $state(1);
</script>

{#snippet customText(props: { perPage?: number })}
  Page {page} - showing {props.perPage} per page
{/snippet}

<Pagination.Root bind:page perPage={25} totalCount={100} text={customText} />

Compound Components

For more control over layout and features, use the compound component API: Pagination.Info, Pagination.PageSize, Pagination.Controls, and Pagination.Separator.

Page Size Selector

Add a dropdown to let users select the number of items per page.

Showing 1-25 of 500
Per page: 
<script lang="ts">
  import * as Pagination from "kumo-svelte/components/pagination";
  let page = $state(1);
  let perPage = $state(25);
</script>

<Pagination.Root bind:page {perPage} totalCount={500}>
  <Pagination.Info />
  <Pagination.Separator />
  <Pagination.PageSize
    value={perPage}
    onValueChange={(size) => {
      perPage = size;
      page = 1;
    }}
  />
  <Pagination.Controls />
</Pagination.Root>

Custom Page Size Options

Customize the available page size options with the options prop. Defaults to [25, 50, 100, 250].

Showing 1-10 of 200
Per page: 
<script lang="ts">
  import * as Pagination from "kumo-svelte/components/pagination";
  let page = $state(1);
  let perPage = $state(10);
</script>

<Pagination.Root bind:page {perPage} totalCount={200}>
  <Pagination.Info />
  <Pagination.Separator />
  <Pagination.PageSize
    value={perPage}
    options={[10, 20, 50]}
    onValueChange={(size) => {
      perPage = size;
      page = 1;
    }}
  />
  <Pagination.Controls />
</Pagination.Root>

Custom Info Text

Use a snippet to customize the info text.

Page 1 of 4
<script lang="ts">
  import * as Pagination from "kumo-svelte/components/pagination";
  let page = $state(1);
</script>

{#snippet info(props: { page: number; totalCount?: number })}
  Page {props.page} of {Math.ceil((props.totalCount ?? 1) / 25)}
{/snippet}

<Pagination.Root bind:page perPage={25} totalCount={100}>
  <Pagination.Info text={info} />
  <Pagination.Controls />
</Pagination.Root>

Custom Layout

Arrange components in any order. Here the page size selector is on the right.

Showing 1-25 of 500
Per page: 
<script lang="ts">
  import * as Pagination from "kumo-svelte/components/pagination";
  let page = $state(1);
  let perPage = $state(25);
</script>

<Pagination.Root bind:page {perPage} totalCount={500}>
  <Pagination.Info />
  <div class="flex items-center gap-2">
    <Pagination.Controls />
    <Pagination.Separator />
    <Pagination.PageSize
      value={perPage}
      onValueChange={(size) => {
        perPage = size;
        page = 1;
      }}
    />
  </div>
</Pagination.Root>

Dropdown Page Selector

Use pageSelector="dropdown" on Pagination.Controls to render a dropdown select instead of a text input for page navigation.

Showing 1-25 of 500
Per page: 
<script lang="ts">
  import * as Pagination from "kumo-svelte/components/pagination";
  let page = $state(1);
  let perPage = $state(25);
</script>

<Pagination.Root bind:page {perPage} totalCount={500}>
  <Pagination.Info />
  <Pagination.Separator />
  <Pagination.PageSize
    value={perPage}
    onValueChange={(size) => {
      perPage = size;
      page = 1;
    }}
  />
  <Pagination.Controls pageSelector="dropdown" />
</Pagination.Root>

Internationalization

Use the labels prop to customize all UI strings for different locales. All labels default to English.

Affichage de 1-10 sur 100
<script lang="ts">
  import * as Pagination from "kumo-svelte/components/pagination";
  let page = $state(1);
</script>

{#snippet frenchInfo(props: { pageShowingRange: string; totalCount?: number })}
  Affichage de <span class="tabular-nums">{props.pageShowingRange}</span> sur
  <span class="tabular-nums">{props.totalCount}</span>
{/snippet}

<Pagination.Root
  bind:page
  perPage={10}
  totalCount={100}
  labels={{
    firstPage: "Première page",
    previousPage: "Page précédente",
    nextPage: "Page suivante",
    lastPage: "Dernière page",
    pageNumber: "Numéro de page",
    pageSize: "Taille de page",
  }}
>
  <Pagination.Info text={frenchInfo} />
  <Pagination.Controls />
</Pagination.Root>

API Reference

Pagination

PropTypeDefault
childrenSnippet—
classstring—
controlsKumoPaginationControlsKUMO_PAGINATION_DEFAULT_VARIANTS.controls
labelsPaginationLabels—
pagenumber1
perPagenumber—
setPage(page: number) => void—
textSnippet<[props: PaginationInfoSnippetProps]>—
totalCountnumber—

Pagination.Controls

PropTypeDefault
classstring—
controlsKumoPaginationControlsKUMO_PAGINATION_DEFAULT_VARIANTS.controls
pageSelector"input" | "dropdown""input"

Pagination.Info

PropTypeDefault
classstring—
textSnippet<[props: PaginationInfoSnippetProps]>—

Pagination.PageSize

PropTypeDefault
classstring—
labelSnippet | string"Per page:"
onValueChange*(size: number) => void—
optionsnumber[][...DEFAULT_PAGE_SIZE_OPTIONS]
value*number—

Pagination.Separator

PropTypeDefault
classstring—

Accessibility

Pagination.Controls renders a navigation region with accessible labels for first, previous, next, last, page number, and page size controls. Use the labels prop to localize those labels.