---
title: Pagination
description: Pagination with page navigation, next and previous links.
base: base
component: true
---
## Installation
CommandManual
```bash
npx shadcn@latest add pagination
```
Copy and paste the following code into your project.Update the import paths to match your project setup.
## 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
```
## Examples
### Simple
A simple pagination with only page numbers.
### Icons Only
Use just the previous and next buttons without page numbers. This is useful for data tables with a rows per page selector.
## Next.js
By default the `` component will render an `` tag.
To use the Next.js `` component, make the following updates to `pagination.tsx`.
```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](/docs/rtl).
## Changelog
### RTL Support
If you're upgrading from a previous version of the `Pagination` component, you'll need to apply the following updates to add the `text` prop:
Update `PaginationPrevious`.
```diff
function PaginationPrevious({
className,
+ text = "Previous",
...props
- }: React.ComponentProps) {
+ }: React.ComponentProps & { text?: string }) {
return (
- Previous
+ {text}
)
}
```
Update `PaginationNext`.
```diff
function PaginationNext({
className,
+ text = "Next",
...props
- }: React.ComponentProps) {
+ }: React.ComponentProps & { text?: string }) {
return (
- Next
+ {text}
)
}
```