# Pagination
Pagination with page navigation, next and previous links.
> For the complete documentation index, see [llms.txt](/llms.txt). Markdown variants are available by appending `.md` to any URL or sending an `Accept: text/markdown` header. An agent skill is available at [/.well-known/agent-skills/site-skill.md](/.well-known/agent-skills/site-skill.md).
## Installation [#installation]
Command
Manual
```bash
npx shadcn@latest add https://shadcn-cssinjs.com/r/pagination.json
```
Copy and paste the following code into your project.
Update the import paths to match your project setup.
## Usage [#usage]
```tsx showLineNumbers
import {
Pagination,
PaginationContent,
PaginationEllipsis,
PaginationItem,
PaginationLink,
PaginationNext,
PaginationPrevious,
} from "@/components/ui/pagination";
```
```tsx showLineNumbers
1
2
3
```
## Composition [#composition]
Use the following composition to build a `Pagination`:
```text
Pagination
└── PaginationContent
├── PaginationItem
│ └── PaginationPrevious
├── PaginationItem
│ └── PaginationLink
├── PaginationItem
│ └── PaginationEllipsis
└── PaginationItem
└── PaginationNext
```
## Simple [#simple]
A simple pagination with only page numbers.
## Icons Only [#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 [#nextjs]
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 [#rtl]
To enable RTL support in shadcn/ui, see the [RTL configuration guide](/docs/rtl).