Display

Pagination

Navigation between pages of a data set, with a bindable current page.

<script>
  import { Pagination } from "@codeatlasdev/ui";
</script>

<Pagination count={100} perPage={10} bind:page />

count is the total number of items, not the number of pages. Pages are numbered from 1.

Basic

Current page: 1

Code

<script lang="ts">
  import { Pagination } from '@codeatlasdev/ui';

  let page = $state(1);
</script>

<div class="wrap">
  <Pagination count={100} perPage={10} bind:page />
  <p>Current page: {page}</p>
</div>

<style>
  .wrap { display: flex; flex-direction: column; gap: var(--ca-space-3); }
  p { margin: 0; font-size: var(--ca-font-size-body2); color: var(--ca-text-secondary); }
</style>

More siblings

`siblingCount` controls how many pages show around the current one.

Code

<script lang="ts">
  import { Pagination } from '@codeatlasdev/ui';
</script>

<Pagination count={200} perPage={10} siblingCount={2} />

Few items

Code

<script lang="ts">
  import { Pagination } from '@codeatlasdev/ui';
</script>

<Pagination count={30} perPage={10} />

Props

Prop	Type	Default	Description
`count`	`number`	–	Total number of items to paginate. Required.
`perPage`	`number`	`10`	Items per page.
`page`	`number`	`1`	Current page, 1-based. Bindable.
`siblingCount`	`number`	`1`	Pages shown on each side of the current page.
`onPageChange`	`(page: number) => void`	`undefined`	Called when the page changes.
`class`	`string`	`''`	Extra class names.