---
type: doc
title: Pagination
description: Pagination with page navigation, next and previous links.
---
> Fulldev UI for React. The `@fulldev` registry in `components.json` points at `https://ui.full.dev/r/react/styles/{style}/{name}.json`; see [installation](/react/docs/installation.md).
```tsx title="src/components/examples/pagination/pagination-demo.tsx"
import {
Pagination,
PaginationContent,
PaginationEllipsis,
PaginationItem,
PaginationLink,
PaginationNext,
PaginationPrevious,
} from "@/components/ui/pagination"
export function PaginationDemo() {
return (
1
2
3
)
}
```
## Installation
```bash
npx shadcn@latest add @fulldev/pagination
```
## Usage
```tsx showLineNumbers
import {
Pagination,
PaginationContent,
PaginationEllipsis,
PaginationItem,
PaginationLink,
PaginationNext,
PaginationPrevious,
} from "@/components/ui/pagination"
```
```tsx showLineNumbers
1
2
3
```
## Composition
Use the following composition to build a `Pagination`:
```text
Pagination
└── PaginationContent
├── PaginationItem
│ └── PaginationPrevious
├── PaginationItem
│ └── PaginationLink
├── PaginationItem
│ └── PaginationEllipsis
└── PaginationItem
└── PaginationNext
```
## Simple
A simple pagination with only page numbers.
```tsx title="src/components/examples/pagination/pagination-simple.tsx"
import {
Pagination,
PaginationContent,
PaginationItem,
PaginationLink,
} from "@/components/ui/pagination"
export function PaginationSimple() {
return (
1
2
3
4
5
)
}
```
## Icons Only
Use just the previous and next buttons without page numbers.
```tsx title="src/components/examples/pagination/pagination-icons-only.tsx"
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 (
Rows per page
)
}
```
## Next.js
By default the `` component will render an `` tag.
```diff showLineNumbers /typeof Link/ {1}
+ import Link from "next/link"
- type PaginationLinkProps = ... & React.ComponentProps<"a">
+ type PaginationLinkProps = ... & React.ComponentProps
const PaginationLink = ({...props }: ) => (
-
+
// ...
-
+
)
```
**Note:** We are making updates to the cli to automatically do this for you.
## RTL
To enable RTL support in shadcn/ui, see the [RTL configuration guide](https://ui.shadcn.com/docs/rtl).
```tsx title="src/components/examples/pagination/pagination-rtl.tsx"
"use client"
import * as React from "react"
import {
Pagination,
PaginationContent,
PaginationEllipsis,
PaginationItem,
PaginationLink,
PaginationNext,
PaginationPrevious,
} from "@/components/ui/pagination"
import {
useTranslation,
type Translations,
} from "@/components/language-selector"
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[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 (
{formatNumber(1)}
{formatNumber(2)}
{formatNumber(3)}
)
}
```
## API Reference
Source: [`react/src/components/ui/pagination.tsx`](https://github.com/fulldotdev/ui/blob/main/react/src/components/ui/pagination.tsx)
## Install what this page shows
```bash
npx shadcn@latest add @fulldev/pagination-examples
```