Pagination

Page links for long lists and tables, with previous and next controls and a raised current page.

npx prodular-ui add pagination

Numbered

First, last and the pages around the current one. Gaps collapse to an ellipsis.

import {  Pagination,  PaginationContent,  PaginationEllipsis,  PaginationItem,  PaginationLink,  PaginationNext,  PaginationPrevious,} from "@/components/ui/pagination"
export default function PaginationDefault() {  return (    <Pagination>      <PaginationContent>        <PaginationItem>          <PaginationPrevious href="#page-3" />        </PaginationItem>        <PaginationItem>          <PaginationLink href="#page-1">1</PaginationLink>        </PaginationItem>        <PaginationItem>          <PaginationEllipsis />        </PaginationItem>        <PaginationItem>          <PaginationLink href="#page-3">3</PaginationLink>        </PaginationItem>        <PaginationItem>          <PaginationLink href="#page-4" isActive>            4          </PaginationLink>        </PaginationItem>        <PaginationItem>          <PaginationLink href="#page-5">5</PaginationLink>        </PaginationItem>        <PaginationItem>          <PaginationEllipsis />        </PaginationItem>        <PaginationItem>          <PaginationLink href="#page-52">52</PaginationLink>        </PaginationItem>        <PaginationItem>          <PaginationNext href="#page-5" />        </PaginationItem>      </PaginationContent>    </Pagination>  )}

In a table footer

For large data sets, a range summary and previous and next are often enough.

Audit log

Every change to roles, keys and billing.

Member	Action	Time
Maya Okafor	Rotated the production API key	Oct 21, 09:42
Daniel Reyes	Changed Hana Sato to Admin	Oct 20, 17:08
Priya Raman	Updated the billing email	Oct 20, 11:31

Showing 51 to 75 of 1,284 events

import {  Card,  CardContent,  CardDescription,  CardFooter,  CardHeader,  CardTitle,} from "@/components/ui/card"import {  Pagination,  PaginationContent,  PaginationItem,  PaginationNext,  PaginationPrevious,} from "@/components/ui/pagination"import {  Table,  TableBody,  TableCell,  TableHead,  TableHeader,  TableRow,} from "@/components/ui/table"
const events = [  { actor: "Maya Okafor", action: "Rotated the production API key", time: "Oct 21, 09:42" },  { actor: "Daniel Reyes", action: "Changed Hana Sato to Admin", time: "Oct 20, 17:08" },  { actor: "Priya Raman", action: "Updated the billing email", time: "Oct 20, 11:31" },]
export default function PaginationTableFooter() {  return (    <Card className="w-full max-w-xl">      <CardHeader>        <CardTitle>Audit log</CardTitle>        <CardDescription>Every change to roles, keys and billing.</CardDescription>      </CardHeader>      <CardContent>        <Table>          <TableHeader>            <TableRow>              <TableHead>Member</TableHead>              <TableHead>Action</TableHead>              <TableHead numeric>Time</TableHead>            </TableRow>          </TableHeader>          <TableBody>            {events.map((e) => (              <TableRow key={e.action}>                <TableCell className="font-medium">{e.actor}</TableCell>                <TableCell className="text-muted-foreground">{e.action}</TableCell>                <TableCell numeric className="text-muted-foreground">{e.time}</TableCell>              </TableRow>            ))}          </TableBody>        </Table>      </CardContent>      <CardFooter className="justify-between">        <span className="text-[13px] text-muted-foreground tabular-nums">          Showing 51 to 75 of 1,284 events        </span>        <Pagination className="mx-0 w-auto">          <PaginationContent>            <PaginationItem>              <PaginationPrevious href="#page-2" />            </PaginationItem>            <PaginationItem>              <PaginationNext href="#page-4" />            </PaginationItem>          </PaginationContent>        </Pagination>      </CardFooter>    </Card>  )}

Anatomy

<Pagination>  <PaginationContent>    <PaginationItem><PaginationPrevious href="?page=3" /></PaginationItem>    <PaginationItem><PaginationLink href="?page=4" isActive>4</PaginationLink></PaginationItem>    <PaginationItem><PaginationNext href="?page=5" /></PaginationItem>  </PaginationContent></Pagination>

Guidance

Use it when

Tables and lists with more rows than fit comfortably, where people need to know their position.
The footer of a table card, aligned right.

Avoid

Feeds and activity logs that people scroll through. Load more on scroll instead.
Showing every page number. Show at most seven slots.

Rules for AI agents

Published in llms-full.txt, the registry and the MCP server, so coding agents follow them when they build with this component.

Mark the current page with isActive. It renders aria-current="page".
Show the first page, the last page and one page on each side of the current one. Fill gaps with PaginationEllipsis.
Give every PaginationLink an href, or render it with a router link.
In a table card, put Pagination in CardFooter with className="mx-0 w-auto" and a 13px range summary on the left.
Format totals with thousands separators: 1,284.

API

PaginationLink

Prop	Type	Default	Description
isActive	boolean	false	Marks the current page.
size	Button size	"icon"	Button size for the link.

PaginationPrevious

Prop	Type	Default	Description
text	string	"Previous"	Label. Hidden below the sm breakpoint.

PaginationNext

Prop	Type	Default	Description
text	string	"Next"	Label. Hidden below the sm breakpoint.

Installation

The Prodular UI CLI adds the source to components/ui with everything it depends on. In a project that already uses shadcn/ui, the shadcn CLI installs it from the Prodular registry too. See Installation for the first setup.

npx prodular-ui add pagination# or, with the registry in components.jsonnpx shadcn@latest add @prodular/pagination