Pagination

Use pagination for splitting long lists or tables across pages. Pagination computes the page-item list for you — render PaginationItem for each entry with v-slot and let it hand you the page number.

<script setup lang="ts">
import {
  Pagination,
  PaginationContent,
  PaginationEllipsis,
  PaginationItem,
  PaginationNext,
  PaginationPrevious,
} from "@/components/ui/pagination";
</script>

<template>
  <Pagination v-slot="{ page }" :total="100" :items-per-page="10" :sibling-count="1" show-edges>
    <PaginationContent>
      <PaginationPrevious />
      <PaginationItem :value="1" :is-active="page === 1">1</PaginationItem>
      <PaginationEllipsis />
      <PaginationItem :value="10" :is-active="page === 10">10</PaginationItem>
      <PaginationNext />
    </PaginationContent>
  </Pagination>
</template>

Built on reka-ui's Pagination, which drives page math off total and items-per-page. PaginationFirst/PaginationLast are also available for jump-to-start/end controls, and PaginationItem/PaginationFirst/PaginationLast/PaginationNext/ PaginationPrevious all accept a size prop shared with Button.

Installation

Usage