Navigation Core Stable
Pagination
A page-number control with Previous/Next, ellipsis collapsing for long runs, and optional First/Last jump buttons.
Preview
svelte
<script lang="ts">
import { Pagination } from "fancy-ui-svelte";
let page = $state(1);
</script>
<Pagination bind:page count={12} />Installation
pnpm add fancy-ui-svelte
import { Pagination } from 'fancy-ui-svelte'
Usage
svelte
<script lang="ts">
import { Pagination } from 'fancy-ui-svelte';
</script>
<Pagination />Examples
Basic Usage
svelte
<script lang="ts">
import { Pagination } from "$lib/fancy-ui/pagination";
let page = $state(1);
</script>
<Pagination 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 "$lib/fancy-ui/pagination";
let page = $state(1);
</script>
<div class="flex flex-col items-start gap-2">
<Pagination 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 "$lib/fancy-ui/pagination";
let page = $state(6);
</script>
<Pagination bind:page count={30} showEdges />Disabled State
svelte
<script lang="ts">
import { Pagination } from "$lib/fancy-ui/pagination";
let page = $state(4);
</script>
<Pagination bind:page count={12} disabled />Props
| Prop | Type | Default | Description |
|---|---|---|---|
page | number | 1 | Current page, 1-based. Bindable. |
count * | 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. |
Slots
| Slot | Description |
|---|---|
previousLabel | Overrides the Previous button's content. |
nextLabel | Overrides the Next button's content. |
Links
Related components
Br
Breadcrumb
A data-driven trail of links with automatic truncation, a decorative separator, and the current page marked for assistive tech.
Navigation Stable
Co
CommandMenu
A modal search palette over a flat vocabulary of items — grouped results, diacritic-insensitive filtering, match highlighting, and full keyboard navigation with focus that never leaves the search field.
Navigation Stable
Co
ContextMenu
A menu that opens at the pointer on right-click, sharing DropdownMenu's item, submenu and keyboard behaviour but anchored to a virtual point instead of a trigger element.
Navigation Stable