Github

Pagination

PreviousNext

Pagination with page navigation, next and previous links.

import {	Pagination,	PaginationContent,	PaginationEllipsis,	PaginationItem,	PaginationLink,	PaginationNext,	PaginationPrevious,} from "@/components/ui/pagination";
export function PaginationDemo() {	return (		<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>					<PaginationNext href="#" />				</PaginationItem>			</PaginationContent>		</Pagination>	);}

Installation

pnpm dlx shadcn@latest add @herocn/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>      <PaginationLink href="#" isActive>        2      </PaginationLink>    </PaginationItem>    <PaginationItem>      <PaginationLink href="#">3</PaginationLink>    </PaginationItem>    <PaginationItem>      <PaginationEllipsis />    </PaginationItem>    <PaginationItem>      <PaginationNext href="#" />    </PaginationItem>  </PaginationContent></Pagination>

Composition

Use the following composition to build a Pagination:

Pagination└── PaginationContent    ├── PaginationItem    │   └── PaginationPrevious    ├── PaginationItem    │   └── PaginationLink    ├── PaginationItem    │   └── PaginationEllipsis    └── PaginationItem        └── PaginationNext

Examples

Simple

A simple pagination with only page numbers.

import {	Pagination,	PaginationContent,	PaginationItem,	PaginationLink,} from "@/components/ui/pagination";
export function PaginationSimple() {	return (		<Pagination>			<PaginationContent>				<PaginationItem>					<PaginationLink href="#">1</PaginationLink>				</PaginationItem>				<PaginationItem>					<PaginationLink href="#" isActive>						2					</PaginationLink>				</PaginationItem>				<PaginationItem>					<PaginationLink href="#">3</PaginationLink>				</PaginationItem>				<PaginationItem>					<PaginationLink href="#">4</PaginationLink>				</PaginationItem>				<PaginationItem>					<PaginationLink href="#">5</PaginationLink>				</PaginationItem>			</PaginationContent>		</Pagination>	);}

Icons Only

Use just the previous and next buttons without page numbers. This is useful for data tables with a rows per page selector.

import { Field, FieldLabel } from "@/components/ui/field";import {	Pagination,	PaginationContent,	PaginationItem,	PaginationNext,	PaginationPrevious,} from "@/components/ui/pagination";import {	Select,	SelectContent,	SelectGroup,	SelectItem,	SelectTrigger,	SelectValue,} from "@/components/ui/select";
export function PaginationIconsOnly() {	return (		<div className="flex items-center justify-between gap-4">			<Field orientation="horizontal" className="w-fit">				<FieldLabel htmlFor="select-rows-per-page">Rows per page</FieldLabel>				<Select defaultValue="25">					<SelectTrigger className="w-20" id="select-rows-per-page">						<SelectValue />					</SelectTrigger>					<SelectContent align="start">						<SelectGroup>							<SelectItem value="10">10</SelectItem>							<SelectItem value="25">25</SelectItem>							<SelectItem value="50">50</SelectItem>							<SelectItem value="100">100</SelectItem>						</SelectGroup>					</SelectContent>				</Select>			</Field>			<Pagination className="mx-0 w-auto">				<PaginationContent>					<PaginationItem>						<PaginationPrevious href="#" />					</PaginationItem>					<PaginationItem>						<PaginationNext href="#" />					</PaginationItem>				</PaginationContent>			</Pagination>		</div>	);}

Sizes

Use the size prop to change the size of the pagination links.

size="icon-xs"
size="icon-sm"
size="icon"
size="icon-lg"
import {	Pagination,	PaginationContent,	PaginationItem,	PaginationLink,} from "@/components/ui/pagination";
const sizes = ["icon-xs", "icon-sm", "icon", "icon-lg"] as const;
export function PaginationSizes() {	return (		<div className="flex flex-col gap-6">			{sizes.map((size) => (				<div key={size} className="flex flex-col gap-2">					<span className="font-medium text-sm">size="{size}"</span>					<Pagination>						<PaginationContent>							<PaginationItem>								<PaginationLink href="#" size={size}>									1								</PaginationLink>							</PaginationItem>							<PaginationItem>								<PaginationLink href="#" size={size} isActive>									2								</PaginationLink>							</PaginationItem>							<PaginationItem>								<PaginationLink href="#" size={size}>									3								</PaginationLink>							</PaginationItem>						</PaginationContent>					</Pagination>				</div>			))}		</div>	);}

With Ellipsis

A pagination with ellipsis to indicate omitted pages on both sides of the active page.

import {	Pagination,	PaginationContent,	PaginationEllipsis,	PaginationItem,	PaginationLink,	PaginationNext,	PaginationPrevious,} from "@/components/ui/pagination";
export function PaginationEllipsisExample() {	return (		<Pagination>			<PaginationContent>				<PaginationItem>					<PaginationPrevious href="#" />				</PaginationItem>				<PaginationItem>					<PaginationLink href="#">1</PaginationLink>				</PaginationItem>				<PaginationItem>					<PaginationEllipsis />				</PaginationItem>				<PaginationItem>					<PaginationLink href="#">4</PaginationLink>				</PaginationItem>				<PaginationItem>					<PaginationLink href="#" isActive>						5					</PaginationLink>				</PaginationItem>				<PaginationItem>					<PaginationLink href="#">6</PaginationLink>				</PaginationItem>				<PaginationItem>					<PaginationEllipsis />				</PaginationItem>				<PaginationItem>					<PaginationLink href="#">10</PaginationLink>				</PaginationItem>				<PaginationItem>					<PaginationNext href="#" />				</PaginationItem>			</PaginationContent>		</Pagination>	);}

RTL

To enable RTL support in herocn, see the RTL configuration guide.

"use client";
import {	type Translations,	useTranslation,} from "@/components/language-selector";import {	Pagination,	PaginationContent,	PaginationEllipsis,	PaginationItem,	PaginationLink,	PaginationNext,	PaginationPrevious,} from "@/components/ui/pagination";
const translations: Translations = {	en: {		dir: "ltr",		values: {			previous: "Previous",			next: "Next",		},	},	ar: {		dir: "rtl",		values: {			previous: "السابق",			next: "التالي",		},	},	he: {		dir: "rtl",		values: {			previous: "הקודם",			next: "הבא",		},	},};
function toArabicNumerals(num: number): string {	const arabicNumerals = ["٠", "١", "٢", "٣", "٤", "٥", "٦", "٧", "٨", "٩"];	return num		.toString()		.split("")		.map((digit) => arabicNumerals[Number.parseInt(digit, 10)])		.join("");}
export function PaginationRtl() {	const { dir, t, language } = useTranslation(translations, "ar");
	const formatNumber = (num: number): string => {		if (language === "ar") {			return toArabicNumerals(num);		}		return num.toString();	};
	return (		<Pagination dir={dir}>			<PaginationContent>				<PaginationItem>					<PaginationPrevious href="#" text={t.previous} />				</PaginationItem>				<PaginationItem>					<PaginationLink href="#">{formatNumber(1)}</PaginationLink>				</PaginationItem>				<PaginationItem>					<PaginationLink href="#" isActive>						{formatNumber(2)}					</PaginationLink>				</PaginationItem>				<PaginationItem>					<PaginationLink href="#">{formatNumber(3)}</PaginationLink>				</PaginationItem>				<PaginationItem>					<PaginationEllipsis />				</PaginationItem>				<PaginationItem>					<PaginationNext href="#" text={t.next} />				</PaginationItem>			</PaginationContent>		</Pagination>	);}

API Reference

Pagination

PropTypeDefault
PropTypeDefault

PaginationPrevious

PropTypeDefault

PaginationNext

PropTypeDefault