Pagination

Previous/next navigation with page numbers.

Installation

bash
npx shadcn@latest add pagination

Import

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

Basic

<Pagination>  <PaginationContent>    <PaginationItem><PaginationPrevious href="#" /></PaginationItem>    <PaginationItem><PaginationLink href="#">1</PaginationLink></PaginationItem>    <PaginationItem><PaginationLink href="#" isActive>2</PaginationLink></PaginationItem>    <PaginationItem><PaginationLink href="#">3</PaginationLink></PaginationItem>    <PaginationItem><PaginationEllipsis /></PaginationItem>    <PaginationItem><PaginationLink href="#">10</PaginationLink></PaginationItem>    <PaginationItem><PaginationNext href="#" /></PaginationItem>  </PaginationContent></Pagination>

Controlled

const [page, setPage] = React.useState(1)const totalPages = 10// Render PaginationLink with isActive={page === n}// and onClick={() => setPage(n)}

Props

PROPTYPEDEFAULTDESCRIPTION
isActivebooleanfalseOn PaginationLink — highlights the active page
hrefstring—On PaginationLink/Previous/Next — link destination