Sivir UI
79

Pagination

The first and last page always stay visible. Pages more than siblings (default 1) away from the current page collapse into an ellipsis.

<script lang="ts">
    import { Pagination } from '@sivir-ui/svelte/components/pagination';

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

<Pagination bind:page total={20} siblings={2} />

Installation

Copy the command below and run it in your terminal.

bunx @sivir-ui/svelte add pagination

Usage

Pass the number of pages as total, not the number of items. Bind page, which starts at 1, or listen with onPageChange.

import { Pagination } from '@sivir-ui/svelte/components/pagination';

let page = $state(1);

<Pagination bind:page total={20} />

Anatomy

Pagination - Navigates paginated content.