---
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
```
## 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.