Search

Search documentation

Pagination

Pagination with page navigation, next and previous links.

Installation

pnpm dlx shadcn@latest add @evolphin/pagination

Usage

import {
  Pagination,
  PaginationContent,
  PaginationEllipsis,
  PaginationItem,
  PaginationLink,
  PaginationNext,
  PaginationPrevious,
} from "@/components/ui/pagination";
<Pagination>
  <PaginationContent>
    <PaginationItem>
      <PaginationPrevious href="#" />
    </PaginationItem>
    <PaginationItem>
      <PaginationLink href="#">1</PaginationLink>
    </PaginationItem>
    <PaginationItem>
      <PaginationEllipsis />
    </PaginationItem>
    <PaginationItem>
      <PaginationNext href="#" />
    </PaginationItem>
  </PaginationContent>
</Pagination>

Examples

Default

API Reference

Pagination

PropTypeDefaultDescription
classNamestring-Additional CSS classes

PaginationContent

PropTypeDefaultDescription
classNamestring-Additional CSS classes

PaginationItem

PropTypeDefaultDescription
classNamestring-Additional CSS classes
PropTypeDefaultDescription
isActivebooleanfalseWhether the link is active.
size`"default" \"icon"`"icon"
classNamestring-Additional CSS classes

PaginationPrevious

PropTypeDefaultDescription
classNamestring-Additional CSS classes

PaginationNext

PropTypeDefaultDescription
classNamestring-Additional CSS classes

PaginationEllipsis

PropTypeDefaultDescription
classNamestring-Additional CSS classes

On this page