# Pagination

> A page-number control with Previous/Next, ellipsis collapsing for long runs, and optional First/Last jump buttons; the current-page pill slides between numbers and the numbers glide when the visible run shifts.

- Package: `fancy-ui-svelte` (Svelte 5 + Tailwind CSS v4)
- Category: Navigation
- Tags: pagination, pager, page-numbers, navigation
- Docs: https://fancy-ui.rama.app/docs/components/pagination
- Source: https://github.com/RamaHerbin/fancy-ui/tree/main/src/lib/fancy-ui/pagination

## Import

```svelte
<script lang="ts">
  import { Pagination } from 'fancy-ui-svelte';
</script>
```

Setup (once per project): `npm install fancy-ui-svelte`, then add `@import "fancy-ui-svelte/tailwind.css";` after `@import "tailwindcss";` in your main CSS file. Full guide: https://fancy-ui.rama.app/llms.txt

React: `import { Pagination } from 'fancy-ui-react';` (same prop names; `class` becomes `className`, snippets become `ReactNode`).

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `page` | `number` | `1` | Current page, 1-based. Bindable. |
| `count` (required) | `number` | — | Total number of pages. |
| `onPageChange` | `(page: number) => void` | — | Called with the new page whenever it changes, however the change happened. |
| `siblingCount` | `number` | `1` | Pages shown on each side of the current page. |
| `boundaryCount` | `number` | `1` | Pages always shown at each end of the run. |
| `showEdges` | `boolean` | `false` | Shows First/Last jump buttons alongside Previous/Next. |
| `disabled` | `boolean` | `false` | Disables every control in the nav. |
| `label` | `string` | `"Pagination"` | Accessible name for the nav landmark. |
| `class` | `string` | — | Additional CSS classes, merged onto the nav element. |
| `ref` | `HTMLElement \| null` | `null` | Bindable reference to the nav element. |
| `sound` | `boolean` | `false` | Plays select when the page actually changes, once the user has enabled sound |

## Snippets

| Snippet | Description |
| --- | --- |
| `previousLabel` | Overrides the Previous button's content. |
| `nextLabel` | Overrides the Next button's content. |

## Examples

### Basic Usage

```svelte
<script lang="ts">
	import { Pagination } from "fancy-ui-svelte";

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

<Pagination sound bind:page count={12} />
```

### Many Pages

A 200-page run — the sequence stays a handful of numbers plus two ellipses.

```svelte
<script lang="ts">
	import { Pagination } from "fancy-ui-svelte";

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

<div class="flex flex-col items-start gap-2">
	<Pagination sound bind:page count={200} />
	<p class="text-muted-foreground text-sm">
		A 200-page run: the sequence stays a handful of numbers plus two ellipses, wherever
		{page} lands.
	</p>
</div>
```

### With First/Last

First/Last jump buttons alongside Previous/Next.

```svelte
<script lang="ts">
	import { Pagination } from "fancy-ui-svelte";

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

<Pagination sound bind:page count={30} showEdges />
```

### Disabled State

```svelte
<script lang="ts">
	import { Pagination } from "fancy-ui-svelte";

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

<Pagination bind:page count={12} disabled />
```