Sivir UI
Studio 64

Pagination

A compact pager that truncates long ranges with an ellipsis.

  • Result 1
  • Result 2
  • Result 3
  • Result 4
  • Result 5

Page 1 of 10

Installation

Copy the command below and run it in your terminal.

bunx @sivir-ui/svelte add pagination

Usage

Import the Pagination component and use it:

import { Pagination } from '$lib/sivir/components/pagination';

let page = $state(1);

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

Examples

Tune how many pages surround the current one.

Sibling count

Anatomy

Pagination - Navigates paginated content.