Pagination

Simple

Just previous, a few pages, and next — no edges or ellipsis.

Usage

Import the parts you need from the component's folder.

import {
  Pagination,
  PaginationContent,
  PaginationFirst,
  PaginationLast,
  PaginationPrevious,
  PaginationNext,
  PaginationItem,
  PaginationEllipsis,
} from "@/components/ui/pagination";

Default

Number bar with prev/next, first/last, and ellipsis for long ranges.

With edges

showEdges keeps the first and last page visible even on long ranges.

Controlled

Bind v-model:page to a ref so the active page is reflected outside the component.

Icons only

Override the previous/next slots with a bare chevron and use size icon page buttons for a compact bar.

API Reference