@usevyre/react@usevyre/vue

Pagination

A page navigation control with smart ellipsis truncation. Automatically hides out-of-range page numbers and replaces them with … dots while always keeping the first and last pages visible.

Basic

Fully controlled — provide page and onPageChange (React) orv-model (Vue).

Page 1 of 10

import { Pagination } from "@usevyre/react";

const [page, setPage] = useState(1);

<Pagination
  page={page}
  totalPages={10}
  onPageChange={setPage}
/>

<script setup>
import { Pagination } from "@usevyre/vue";
const page = ref(1);
</script>
<template>
  <Pagination v-model="page" :total-pages="10" />
</template>

Many pages with siblings

Use siblings to control how many page buttons appear around the current page. The component automatically inserts … where pages are skipped.

Page 7 of 20 · siblings=2

{/* Show 2 page siblings on each side of the current page */}
<Pagination
  page={page}
  totalPages={20}
  onPageChange={setPage}
  siblings={2}
/>

<Pagination v-model="page" :total-pages="20" :siblings="2" />

With info label

Add showInfo to switch to a full-width row layout with aShowing x–y of total label on the left and controls on the right. Provide totalItems + pageSize for the exact range; omit them to fall back to Page x of y.

Showing 1–10 of 98

{/* Showing x–y of total, computed from totalItems + pageSize */}
<Pagination
  page={page}
  totalPages={totalPages}
  onPageChange={setPage}
  showInfo
  totalItems={98}
  pageSize={10}
/>

{/* Without edge buttons */}
<Pagination
  page={page}
  totalPages={totalPages}
  onPageChange={setPage}
  showInfo
  showEdges={false}
  totalItems={98}
  pageSize={10}
/>

<!-- Showing x–y of total, computed from totalItems + pageSize -->
<Pagination
  v-model="page"
  :total-pages="totalPages"
  show-info
  :total-items="98"
  :page-size="10"
/>

<!-- Without edge buttons -->
<Pagination
  v-model="page"
  :total-pages="totalPages"
  show-info
  :show-edges="false"
  :total-items="98"
  :page-size="10"
/>

Props

Prop	Type	Default	Description
`page / v-model`	`number`	`—`	Current page (1-indexed).
`totalPages`	`number`	`—`	Total number of pages.
`onPageChange`	`(page: number) => void`	`—`	(React) Called when the user navigates to a new page.
`siblings`	`number`	`1`	Number of page buttons shown on each side of the current page.
`showEdges`	`boolean`	`true`	Show first/last page jump buttons (⟪ / ⟫).
`showInfo`	`boolean`	`false`	Show a 'Showing x–y of total' label on the left in a space-between row layout.
`totalItems`	`number`	`—`	Total record count. Used with pageSize to compute the x–y range in the info label.
`pageSize`	`number`	`—`	Records per page. Used with totalItems to compute the x–y range.
`class / className`	`string`	`—`	Additional CSS class on the root element.

AI Context

← Modal Popover →