Sivir UI
73

Pagination

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

  • Invoice #1001
  • Invoice #1002
  • Invoice #1003
  • Invoice #1004
  • Invoice #1005

Page 1 of 10

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} />

Examples

Sibling count

Anatomy

Pagination - Navigates paginated content.