Command Palette

Search for a command to run...

Pagination

shadcn/ui

Pagination with page navigation, next/previous buttons, and page numbers.

import {	Pagination,	PaginationContent,	PaginationItem,	PaginationLink,	PaginationNext,	PaginationPrevious,} from "@/registry/optics/pagination";<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>			<PaginationNext href="#" />		</PaginationItem>	</PaginationContent></Pagination>

Installation

pnpm dlx shadcn@latest add https://optics.agusmayol.com.ar/r/pagination.json

Props

<Pagination />
Name
Type
className
string

<PaginationContent />
Name
Type
className
string
<PaginationItem />
Name
Type
No specific props. Accepts standard HTML li attributes.
<PaginationLink />
Name
Type
className
string
isActive
boolean
variant
string
size
"default" | "sm" | "lg" | "icon" | "icon-sm" | "icon-lg" (default: "icon")
<PaginationPrevious />
Name
Type
className
string
<PaginationNext />
Name
Type
className
string
<PaginationEllipsis />
Name
Type
className
string
Navigation MenuPopover